实用的3D模型压缩方法

遇到的问题

在利用Three.js开发过程中，3D模型动辄几十上百兆，在网速、带宽都不足以流畅加载的情况下，优化模型便变得刻不容缓，因此需要介绍下这一工具，在平时开发过程中其压缩率可达到90%左右，也就说100M的模型文件可以压缩到10M左右。

gltf-pipeline

该工具是我压缩模型用的比较多的，当然还有其他方法，这个我们后续再说，该工具不仅仅用于Draco网格压缩，它还用于

1.将 glTF 转换为 glb，也可以反向转换2.将缓冲区/纹理保存为嵌入或单独的文件3.将 glTF 1.0 模型转换为 glTF 2.0（使用KHR_techniques_webgl和KHR_blend扩展）

如何使用

配置环境

该工具使用需要给予Node环境，如果您有Node环境，可以执行npm install -g gltf-pipeline来全局安装该工具

准备模型

在这里我准备了一个56M的面具模型

这是压缩前的样子

开始压缩

确保环境安装没问题后，执行gltf-pipeline -i 22.glb -d -s命令

执行完毕后，显示上图内容，然后我们去看当前文件夹，发现多了3个文件，发现.jpg依旧很大，但是其他两个模型文件会很小，才几百KB

验证压缩效果

我们先来看看压缩后的效果如何，在将模型加载后，压缩效果还是很不错的

但是图片文件依旧很大，这样还需要下载图片，依旧很浪费带宽，因此我们使用PS压缩下图片文件看看效果

这是压缩后的图片大小，仅仅有4M左右，保存后记得更改文件名～

整体效果依旧不错，细节保留的非常可以

总结

自此，模型压缩这块我们说完了，这仅仅是针对单个文件模型，如果模型比较多的话这种方法就会显得很麻烦，因此模型切片加载针对大场景模型还是很有用处的，这个我们放到下次再说。

如果文章中有任何问题，欢迎随时指正～

文章每周持续更新，文章类型涉及GIS开发、三维数字开发，可以微信搜索「 金刚小仓 」第一时间阅读和催更（比博客早一些子），同时会不定期分享GIS开发中所用到的一些实用小工具