GLTF 加载

加载模型：

// 加载 gltf 模型
const gltfLoader = new GLTFLoader()
gltfLoader.load('/model/Duck.glb', (gltf) => {
  console.log(gltf)
  scene.add(gltf.scene)
})

可以看到，模型加载成功了，但是却是黑色的，这是因为没有灯光。

添加环境贴图：

// 加载 hdr 贴图
const rgbeLoader = new RGBELoader()
rgbeLoader.load('/texture/Alex_Hart-Nature_Lab_Bones_2k.hdr', (envMap) => {
  // 设置环境贴图
  scene.environment = envMap
  // 设置环境贴图的映射方式
  envMap.mapping = THREE.EquirectangularReflectionMapping
})

可以看到，鸭子模型已经显示出原来的颜色了。

对于压缩过的 GLTF 文件，可以使用 DRACOLoader 来加载。

// 加载 draco 模型
const dracoLoader = new DRACOLoader()
// 设置 draco 解码器路径
dracoLoader.setDecoderPath('/draco/')
// 设置 draco 加载器
gltfLoader.setDRACOLoader(dracoLoader)
gltfLoader.load('/model/city.glb', (gltf) => {
  console.log(gltf)
  scene.add(gltf.scene)
})

可以看到，城市模型已经加载成功了。

本节示例代码：https://github.com/wukaipeng-dev/threejs-demo/blob/main/02-basic/src/main-gltf.ts