threejs 使用DRACOLoader加载draco压缩过的glb模型

上一节我们学习了threejs 加载gltf模型过程，这一节我们学习使用DRACOLoader加载模型，首先我们需要简单的了解一下DRACO。

threejs版本

使用到的threejs版本

"three": "^0.154.0",

Draco介绍

Draco是一个用于压缩和解压3D模型数据的开源库，特别是针对WebGL和WebXR等3D图形应用的数据压缩和传输而设计的。它是Google Chrome团队开发的一个项目，为了提高网络上的实时3D图形应用性能而创建的。

以下是一些关于Draco模型的重要信息和特点：

3D模型压缩：Draco可以将3D模型数据进行有效的压缩，减小文件大小，从而在网络上传输时减少带宽占用。这对于在Web上加载和显示3D模型非常有用，因为较小的文件大小可以提高加载速度。
快速解压：尽管Draco压缩了3D模型数据，但解压速度非常快。这是因为Draco使用了高效的编码和解码算法，以在运行时迅速解压数据。
跨平台支持：Draco支持多个平台，包括Web、Android、iOS等。这意味着您可以在不同的设备和浏览器上使用Draco来加载和显示压缩的3D模型。
开放源代码：Draco是一个开源项目，可以在GitHub上找到其源代码。这使得开发人员可以自由使用和定制它以满足其特定需求。
3D文件格式支持：Draco支持多种3D文件格式，包括glTF、OBJ、PLY等。这意味着您可以将Draco用于压缩和解压各种3D模型文件。
WebGL和WebXR应用：Draco的主要用途是在WebGL和WebXR等Web技术中加载和显示3D模型。通过减小模型文件的大小，它可以提高Web上的实时3D渲染性能。

导入加载器

import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js";
import {GLTFLoader}  from "three/examples/jsm/loaders/GLTFLoader.js";

实例化加载器

我们需要事先准备好解码器相关的文件。

// 实例化加载器

const dracoLoader = new DRACOLoader()
const gltfLoader = new GLTFLoader()

  // 设置draco路径

dracoLoader.setDecoderPath(link + '/draco/');

// 设置gltf加载器draco解码器

gltfLoader.setDRACOLoader(dracoLoader);

gltfLoader.load(link+'/glb/city.glb', (gltf) => {
console.log(gltf)
scene.add(gltf.scene)
})

到这里我们的draco压缩后的glb模型加载就完成了。

threejs加载glb模型

threejs 使用DRACOLoader加载draco压缩过的glb模型

学习笔记

当前内容为 threejs视频教程 Three.js可视化企业实战WEBGL课 -Three.js开发入门与调试设置-加载gltf模型和加载压缩过的模型-学习笔记

笔记代码

笔记代码项目基于vue3 vite js nodejs16 运行

运行效果可查看演示地址：threejs 使用DRACOLoader加载draco压缩过的glb模型