持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情
写在前面
当我们拿到一个gltf模型文件，我们查看这个模型的大小，发现有几十上百兆时，我们就会很头痛，因为有些用户的电脑配置并不高，不能流畅地加载出这么大的模型，此时我们就需要对拿到的模型文件进行压缩。
过程记录
以下是我从GLTFS模型库中下载的一个10343KB的办公楼模型（bgl154.gltf），用作压缩的例子：
现在需要将其进行压缩，我们所使用的压缩工具是gltf-pipeline。
首先，我们需要安装gltf-pipeline，打开任意一个vue-cli的项目，在终端输入npm install -g gltf-pipeline，等待安装完成：
安装完成后，我们在node_modules目录中找到刚刚安装的gltf-pipeline，打开所在文件夹，并将刚刚下载的gltf模型文件复制到该文件夹目录中：
然后在目录中输入cmd，打开终端并输入命令node bin/gltf-pipeline -i bgl154.gltf -f -d（-i表示输入这个bgl154.gltf文件，-f表示输出也是gltf文件，还可以选择输出glb文件，命令改成-b即可，-d表示使用Draco压缩），回车运行：
运行成功后就可以看到刚刚的文件目录下多了一个bgl154-processed.gltf文件，文件大小只有1302KB，这个就是压缩后的模型：
压缩后的文件在threejs中加载时不能直接使用GLTFLoader加载，直接使用GLTFLoader加载会报错，需要将压缩后的模型文件解压后才能使用GLTFLoader加载，我们使用threejs提供的DRACOLoader进行解压，具体代码如下（./js/draco/的js文件可以在threejs的源码中找到）：
// 定义
this.manager = new THREE.LoadingManager();
this.gltfLoader = new GLTFLoader(this.manager);
this.dracoLoader = new DRACOLoader();
this.dracoLoader.setDecoderPath("./js/draco/");
this.dracoLoader.setDecoderConfig({ type: "js" });
this.gltfLoader.setDRACOLoader(this.dracoLoader);
// 使用
this.gltfLoader.load("./models/bgl154-processed.gltf", (gltf) => {
this.scene.add(gltf.scene);
});
加载出来的办公楼模型如下：
打开Network，我们可以看到24ms就加载完成了，这个模型文件未压缩前还不算大，所以加载速度在视觉上对比不明显，当原本的模型更大时，加载速度对比就会更明显。
写在最后
以上就是gltf模型过大的压缩过程全记录
