1. 格式对比:glTF、OBJ、FBX、STL

1.1. 核心结论速查表

格式对比:glTF、OBJ、FBX、STL.png

1.2. 格式深度解析

1. glTF (GL Transmission Format)

  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  const loader = new GLTFLoader();
  loader.load( 'model.glb', function ( gltf ) {
      scene.add( gltf.scene ); // gltf对象包含场景、动画、相机等
  });

2. OBJ (Wavefront)

  // 通常需要同时加载OBJ和MTL
  import { OBJLoader } from 'three/addons/loaders/OBJLoader.js';
  import { MTLLoader } from 'three/addons/loaders/MTLLoader.js';
  const mtlLoader = new MTLLoader();
  mtlLoader.load('model.mtl', (materials) => {
      materials.preload();
      const objLoader = new OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.load('model.obj', (object) => {
          scene.add(object);
      });
  });

3. FBX (Autodesk Filmbox)

  import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
  const loader = new FBXLoader();
  loader.load('model.fbx', (object) => {
      scene.add(object);
      // 对象可能包含嵌入的动画
  });

4. STL (Stereolithography)

  import { STLLoader } from 'three/addons/loaders/STLLoader.js';
  const loader = new STLLoader();
  loader.load('model.stl', (geometry) => {
      // 返回的是 BufferGeometry,需要自己创建材质和网格
      const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
      const mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
  });

1.3. 工作流程建议

  1. 对于现代Web项目(产品展示、交互体验、游戏)

  2. 从DCC工具(如Blender/Maya)向Three.js迁移带复杂动画的模型

  3. 对于静态、无动画的简单模型

  4. 对于3D打印或CAD数据可视化

1.4. 总结

记住通用法则:在创作工具中保存原始工程文件(如 .blend.ma),然后针对Web平台导出为 glTF 进行使用。