Three.js 模型加载 | 三维可视化 / AI 提示词

📋 AI 提示词

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

🖼️ 效果预览

Three.js 模型加载

🎮 案例演示

立即体验

📖 效果拆解

这是一个展示如何加载多种格式 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
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
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 编辑整理，专注 Three.js 着色器、Web 3D、GIS 可视化技术分享。如需转载，请注明出处。