​压缩glb模型文件

使用 gltf-pipeline 进行压缩：

GitHub地址https://github.com/CesiumGS/gltf-pipeline

1. 安装 gltf-pipeline

npm install -g gltf-pipeline

1. 在glb文件目录打开cmd进行命令行压缩：

// cmd:
gltf-pipeline -i glb.glb -d -s

以下是 -d 和 -s 的作用，具体其他的可以参考文档

此时可以看到压缩分离后的效果：

可以看到模型主要是以贴图为主，所以压缩效果不明显：

需要对图片进行批量压缩，这里用的是论坛大佬的工具，可以多支持：

吾爱破解论坛：批量压缩图片工具https://www.52pojie.cn/forum.php?mod=viewthread&tid=1805974&highlight=VIKY

将图片选中直接全部拖进来压缩：

压缩图片前后对比 ：

这里就压缩完成了， 接下来是在 three 中加载，因为使用了draco压缩，所以加载时需要配置解压文件：

将路径 \node_modules\three\examples\jsm\libs\draco 的这个draco文件夹复制到public文件夹下，如 public\draco。

Vue加载：

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

//加载glb模型
const loadGLTF = () => {
    let dracoLoader = new DRACOLoader();
    let loader = new GLTFLoader();
    dracoLoader.setDecoderPath('/draco/'); //publish目录下的解压缩路径
    loader.setDRACOLoader(dracoLoader); //加载文件
    loader.load("...glb文件路径", glb => {   
        ...
    });
}