品牌网站运营搜索引擎排名优化seo

以下是关于在 Three.js 中引入模型的完整知识点梳理，包括常用格式、加载方式、动画、压缩、示例代码等内容：

---

✅ 一、常见3D模型文件格式

格式	特点
.glTF	推荐格式，结构清晰，支持动画、材质、骨骼等，体积小，加载快
.glb	glTF 的二进制版，所有资源打包成一个文件，更方便部署与加载
.obj	老牌格式，广泛支持，但不支持动画和高级材质
.fbx	支持动画，但体积较大，解析较慢，常用于动画资产
.dae	Collada 格式，支持动画和材质，兼容性较好

---

✅ 二、glTF模型的优势

• 支持材质、动画、骨骼、Morph Target
• 可压缩（DRACO）
• 支持二进制形式（.glb）
• 是Three.js推荐的标准模型格式

---

✅ 三、Three.js中加载 glTF 模型

1. 基本加载器

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'const loader = new GLTFLoader()
loader.load('models/Fox.glb', (gltf) => {scene.add(gltf.scene)
})

---

2. 加载带动画的 glTF 模型

let mixer
loader.load('models/Fox.glb', (gltf) => {scene.add(gltf.scene)mixer = new THREE.AnimationMixer(gltf.scene)const action = mixer.clipAction(gltf.animations[0])action.play()
})

// 在动画循环中更新
if (mixer) {mixer.update(deltaTime)
}

---

3. 加载使用 DRACO 压缩的模型

DRACO 可大幅压缩模型体积：

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('/draco/') // 放置 decoder 的路径const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)gltfLoader.load('models/compressedModel.glb', (gltf) => {scene.add(gltf.scene)
})

---

✅ 四、场景中的模型处理技巧

• .scale.set(x, y, z)：缩放模型
• .position.set(x, y, z)：设置位置
• .rotation.y = Math.PI：旋转模型
• .traverse()：遍历模型所有子物体（可修改材质等）

gltf.scene.traverse((child) => {if (child.isMesh) {child.castShadow = truechild.receiveShadow = true}
})

---

✅ 五、glTF 模型的文件结构（典型）

/models/Fox/
├── Fox.gltf          ← 主 glTF 文件（JSON 结构）
├── Fox.bin           ← 二进制几何数据
├── textures/
│   └── texture.png   ← 材质纹理文件

或者：

Fox.glb ← 所有内容打包成一个文件

---

✅ 六、进度 & 错误处理

loader.load('models/Fox.glb',(gltf) => { scene.add(gltf.scene) },(progress) => {console.log(`Loading: ${progress.loaded / progress.total * 100}%`)},(error) => {console.error('Error loading model:', error)}
)

---

✅ 七、实践建议

• 使用 glTF Viewer 查看模型结构
• 使用 Blender 导出 .glb 或 .gltf
• 如果模型过大 → 使用 DRACO 压缩（Blender 或 gltf-pipeline 工具）

---