当前位置：首页 > news >正文

引入模型的知识点整理（Three.js）

news 来源：原创 2025/6/23 12:37:25

以下是关于在 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 = true
    child.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)
  }
)