threejs优化之3D模型压缩

threejs优化之3D模型压缩

​ 项目采用vue+threejs开发，在开发过程中需要从外部加载3D模型。一般当模型大小比较大的时候，加载过程会很长，浏览器处于阻塞状态，同时渲染时间也会变长，严重影响用户体验，阻塞严重的情况下还会使浏览器卡死，因此对3D模型大小进行压缩是必然趋势。

​ 通过模型网格压缩，通过glTF配合Draco压缩的方式，可以在视觉效果近乎一致的情况下，让3D模型文件成倍缩小。

全局安装gltf-pipeline

#全局安装
npm install -g gltf-pipeline
#压缩glb文件 -b表示输出glb格式，-d表示压缩
gltf-pipeline -i model.glb -b -d
#压缩glb文件并将纹理图片分离出来
gltf-pipeline -i model.glb -b -d -t
#更多参数查阅
gltf-pipeline -h

压缩3D模型文件

采用DRACO压缩并加载gltf模型的用法，以VUE开发为例

gltf-pipeline -i .\public\model\model.gltf -o .\public\model\model.mini.gltf  -d --draco.compressionLevel 9 --draco.quantizePositionBits 14

其中-i是输入文件；–draco