threejs - 加载gltf模型导入 import { GLTFLoader } from'three/addons

[glTF]（gl传输格式）是一种开放格式的规范（[open format specification]），用于更高效地传输、加载3D内容。该类文件以JSON（.gltf）格式或二进制（.glb）格式提供，外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景，包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。

导入

import { GLTFLoader } from'three/addons/loaders/GLTFLoader.js';

实例化加载器

// 实例化加载器
const gltfLoader = new GLTFLoader()

加载模型

gltfLoader.load(
  // 模型路径  
  "./model/Duck.glb",
  (gltf)=>{
    scene.gltf = gltf.scene
  }
)
// 创建hdr加载器
let rgbeLoader = new RGBELoader()
rgbeLoader.load("./texture/Alex_Hart-Nature_Lab_Bones_2k.hdr", (envMap)=>{
  // 球形映射
  envMap.mapping = THREE.EquirectangularReflectionMapping
  // 设置环境贴图
  scene.environment = envMap
})

加载压缩模型

引入DracoLoader import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'

// 初始化解压缩
const dracoLoader = new DRACOLoader()
// 设置draco路径
dracoLoader.setDecoderPath("./draco/")
// gltf加载器draco解码器
gltfLoader.setDRACOLoader(dracoLoader)
// 加载压缩模型
gltfLoader.load(
  // 模型路径
  "./model/city.glb",
  (gltf)=>{
    // 把模型添加到场景中
    scene.add(gltf.scene)
  }
)