Three.js第八课-模型加载GLTF & 模型解压Draco

Web开发中用的最多的3D格式是GLTF格式，因此接下来谈谈GLTF~

GLTF加载器

• 介绍：GLTF（Graphics Language Transmission Format）是一种用于传输和加载3D模型及其相关数据的开放标准格式。
• 格式：glb是二进制格式数据,gltf是JSON格式数据
• 特点：

1. 开放标准：GLTF是一个开放标准，可由任何人使用和扩展。它基于JSON格式，易于解析和操作。
2. 文件小：GLTF使用二进制格式存储3D模型数据，相比于传统文本格式，可以大幅减小文件大小。此外，GLTF还支持数据压缩，进一步提高了传输效率。
3. 资源共享：GLTF支持引用外部资源，如纹理、材质和动画等，可以减少模型文件的大小，避免重复存储相同的数据。
4. 内存友好：GLTF可以在加载过程中进行渐进式加载，按需加载模型的不同部分，从而减少内存占用和提高加载速度。
5. 兼容性强：GLTF格式得到了广泛的支持，可以在多个平台和应用程序中使用。它可以在WebGL、OpenGL ES以及其他图形API中直接解析和渲染。
6. 扩展性：GLTF支持扩展，可以通过添加自定义扩展来满足特定应用的需求，如PBR材质、骨骼动画等。

• 使用：使用3D建模软件或者在线转换工具将现有的3D模型转换为GLTF格式，然后在应用程序或Web上使用

Three.js使用GLTF加载器加载模型

引入GLTF模型加载器

// 导入GLTF模型加载器
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader'

实例化GLTF模型加载器

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

加载GLTF模型

gltfLoader.load(
    // 模型路径
    "/src/assets/model/Duck.glb",
    // 加载后回调
    (gltf)=>{
        //将模型添加到场景中
        scene.add(gltf.scene)
    }
)

效果

添加环境贴图

根据上述效果看到，鸭子是黑色的，那是因为基础材质MeshBasicMaterial需要光照才能看到本身的颜色，因此我们来添加环境贴图，增加光照，使用上一节的知识RGBELoader加载器

引入RGBELoader加载器

import {RGBELoader} from 'three/examples/jsm/loaders/RGBELoader'

实例化RGBELoader加载器

let rgbaLoader=new RGBELoader()

加载环境贴图

rgbaLoader.load("/src/assets/texture/graybg.hdr",(envMap)=>{
    envMap.mapping=Three.EquirectangularReflectionMapping;
    // 设置环境贴图
    scene.environment=envMap
})

效果

模型解压Draco

• 介绍：Google开发用于3D模型压缩和解压缩的开源库
• 作用：减少3D模型的文件大小，从而加快加载速度并减少网络流量
• API：DRACOLoader加载器
• 使用：将非常大的压缩过的模型文件使用Draco进行解压，然后关联GLTF加载器

Three.js使用Draco解压模型

导入Draco加载器

// 导入Draco加载器
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader'

复制粘贴Three的Draco文件夹到本地static中

路径 three/examples/jsm/libs/draco

实例化Draco解析器

// 实例化Draco解析器
const dracoLoader=new DRACOLoader()

设置Draco路径（路径为刚刚复制粘贴的路径）

// 设置Draco路径
dracoLoader.setDecoderPath("/draco/")

加载GLTF模型

gltfLoader.load(
    // 模型路径
    "/src/assets/model/road.glb",
    (gltf)=>{
        scene.add(gltf.scene)
    }
)

设置GLTF模型加载器对应的Draco解析器(关联)

gltfLoader.setDRACOLoader(dracoLoader)

结果