【Three.js】Three.js 中加载 3D 模型

在 Three.js 中加载 3D 模型，最核心的步骤就是根据模型格式，选择合适的加载器（Loader）。

GLTF/GLB 是目前最推荐使用的格式，它功能全面且为 Web 端优化。下面我会详细介绍如何操作。

📦 主流模型格式与加载器

格式	特点	加载器 (Loader)	引入方式
GLTF/GLB	官方首选，支持网格、材质、骨骼动画等，体积小、效率高。	GLTFLoader	import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
OBJ	通用旧格式，只含几何数据，不包含材质和动画。	OBJLoader	import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
FBX	工业标准，支持复杂动画，但文件较大。	FBXLoader	import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

🚀 核心步骤：以GLTFLoader为例

这是最标准、最推荐的加载流程：

1. 导入加载器

   import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

2. 创建加载器实例并加载模型

   const loader = new GLTFLoader();
   loader.load(
     // 1. 模型文件路径
     'path/to/your/model.glb',
     
     // 2. 加载成功回调
     (gltf) => {
       const model = gltf.scene;
       scene.add(model);
       // 如果模型包含动画，可以在这里播放
       // const mixer = new THREE.AnimationMixer(model);
       // const action = mixer.clipAction(gltf.animations[0]);
       // action.play();
     },
     
     // 3. 加载进度回调 (可选)
     (xhr) => {
       console.log((xhr.loaded / xhr.total * 100) + '% loaded');
     },
     
     // 4. 加载失败回调
     (error) => {
       console.error('An error happened', error);
     }
   );

🧩 其他格式加载示例

1. 加载 OBJ 模型 (带材质)

OBJ 格式的材质信息通常单独保存在一个 .mtl 文件中，因此需要先加载 MTL，再加载 OBJ。

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';

const mtlLoader = new MTLLoader();
mtlLoader.load('path/to/model.mtl', (materials) => {
  materials.preload(); // 预加载材质

  const objLoader = new OBJLoader();
  objLoader.setMaterials(materials); // 将材质设置给OBJ加载器
  objLoader.load('path/to/model.obj', (object) => {
    scene.add(object);
  });
});

2. 加载 FBX 模型

FBX 格式通常自包含材质和动画，加载过程更直接。

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

const loader = new FBXLoader();
loader.load('path/to/model.fbx', (object) => {
  scene.add(object);
});

⚙️ 进阶技巧

• 模型优化 ：加载前，可使用 Blender 等工具对模型进行减面处理 、纹理压缩（如使用 KTX2 格式），以提升加载速度和渲染性能。
• 加载管理 ：使用 LoadingManager 可以统一管理和跟踪多个资源的加载进度。
• 压缩模型 ：对于 GLTF 模型，可以使用 DRACO 压缩来显著减小文件大小。

⚠️ 常见问题

• 加载器未定义：确保已正确导入所需的加载器。
• 模型没有纹理/材质 ：检查模型文件（如 .mtl）是否与主模型文件在同一目录，且路径引用正确。
• 跨域问题：确保模型文件与你的网页同源，或服务器已配置CORS（跨域资源共享）策略。
• 模型不显示：检查相机位置是否在模型前方，以及场景中是否有足够的光源。

💎 总结

总的来说，在 Three.js 中加载 3D 模型可以分为三步：

1. 选格式 ：优先选择 glTF/GLB 格式。
2. 引加载器：根据格式引入对应的 Loader。
3. 调 load() 方法：在回调函数中将模型添加到场景中。