Three.js 模型加载

提示词

PLAINTEXT
1
使用 Three.js 加载多种格式的 3D 模型，包括 GLTF/GLB、FBX 和 OBJ/MTL 格式。

效果描述

这是一个展示如何加载多种格式 3D 模型的示例，包括 GLTF/GLB、FBX 和 OBJ/MTL 格式。

效果特性

  • GLTF/GLB 加载：使用 GLTFLoader 加载 gltf/glb 格式
  • FBX 加载：使用 FBXLoader 加载 fbx 格式
  • OBJ/MTL 加载：使用 OBJLoader 和 MTLLoader 加载 obj/mtl 格式
  • Draco 解码：使用 DRACOLoader 解码压缩的 gltf 模型
  • 材质加载：MTLLoader 加载材质文件
  • 模型缩放：调整模型大小

核心参数

参数 值 说明
GLTF 模型 /files/model/car.glb GLTF 模型文件
FBX 模型 files/model/city.FBX FBX 模型文件
OBJ 模型 files/model/house/house.obj OBJ 模型文件
MTL 材质 files/model/house/house.mtl MTL 材质文件
FBX 缩放 0.0005 FBX 模型缩放比例
OBJ 位置 X+3 OBJ 模型位置偏移

核心代码解析

GLTF/GLB 加载

JAVASCRIPT
1
2
3
4
5
6
const loader = new GLTFLoader();
loader.setDRACOLoader(new DRACOLoader().setDecoderPath(FILE_HOST + "libs/threejs/examples/jsm/libs/draco/"));

loader.load(FILE_HOST + "/files/model/car.glb", (gltf) => {
    scene.add(gltf.scene);
});

FBX 加载

JAVASCRIPT
1
2
3
4
new FBXLoader().load(FILE_HOST + 'files/model/city.FBX', (object3d) => {
    scene.add(object3d);
    object3d.scale.set(0.0005, 0.0005, 0.0005);
});

OBJ/MTL 加载

JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
const objLoader = new OBJLoader();
const mtlLoader = new MTLLoader();

mtlLoader.load(FILE_HOST + 'files/model/house/house.mtl', (mtl) => {
    mtl.preload();
    objLoader.setMaterials(mtl);
    objLoader.load(FILE_HOST + 'files/model/house/house.obj', (obj) => {
        scene.add(obj);
        obj.position.x += 3;
    });
});

技术亮点

  1. 多格式支持：支持 GLTF、FBX、OBJ 多种格式
  2. Draco 解码：使用 DRACOLoader 解码压缩模型
  3. 材质加载：MTLLoader 加载材质文件
  4. 模型缩放：调整模型大小适应场景
  5. 位置调整：调整模型位置避免重叠

调试技巧

  1. 模型路径：确保模型文件路径正确
  2. 模型缩放：不同格式模型需要不同缩放
  3. 材质路径：确保材质文件路径正确
  4. Draco 路径：确保 Draco 解码器路径正确
  5. 加载顺序：先加载材质再加载模型

扩展方向

  1. 加载进度：添加加载进度显示
  2. 错误处理：添加加载错误处理
  3. 模型优化：加载后优化模型
  4. 材质替换：加载后替换材质
  5. 动画加载：加载并播放模型动画

本文档由 ThreeLab 编辑整理，如需转载，请注明出处。