【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为例

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

导入加载器

javascript 复制代码

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

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

javascript 复制代码

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。

javascript 复制代码

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 格式通常自包含材质和动画，加载过程更直接。

javascript 复制代码

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 模型可以分为三步：

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