平时经常要在项目中导入自己建的模型，痛点就是用Blender建出来的模型细节越多，模型越大，甚至动辄几十上百兆，在threejs中加载渲染的速度实在难以接受，我也咨询过专业建模的人士，说是可以在建模的时候可以对模型进行压缩导出，但是我作为一个开发人员，自然想着能不能在项目中通过程序把模型进行压缩。
目前有两个方法可以提高模型加载的速度
- 1、利用算法在加载的时候对模型进行压缩。
- 2、讲模型的数据存到vuex中，实现共享，避免重复加载
一、通过 gltf-pipeline 可以大幅度压缩 gltf/glb 模型文件。 并且有如下的作用
- 将 glTF 转换为 glb
- 将缓冲区/纹理保存为嵌入或单独的文件
- 将 glTF 1.0 模型转换为 glTF 2.0
- 应用Draco网格压缩
步骤：
安装:
npm install -g gltf-pipeline || yarn global add gltf-pipeline
常用压缩命令:
gltf-pipeline -i model.glb -o modelDraco.glb -d // 将model压缩成modelDraco
可选参数 -s 压缩并编写单独的缓冲区、着色器和纹理
项目中的使用：
import { DRACOLoader } from './jsm/loaders/DRACOLoader.js'; // 可用于导入压缩后的模型
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'js/libs/draco/gltf/' ); // 解压压缩模型的相关js文件路径
const loader = new GLTFLoader();
loader.setDRACOLoader( dracoLoader ); //设置DRACOloader
下面就是常规的loader.load加载模型就行啦。。。
二、通过GeometryCompressionUtils.js进行模型压缩：
- GeometryCompressionUtils.compressPositions( mesh ); 位置压缩
- GeometryCompressionUtils.compressNormals(mesh) 压缩法向量
- GeometryCompressionUtils.compressUvs( mesh ); UV压缩
三、通过BufferGeometryUtils.js进行内存缓存压缩：
- BufferGeometryUtils.estimateBytesUsed( mesh.geometry )
写着写着就留下了伤心的眼泪 （≧0≦）呀~~~
其他地方找到我：
知乎：www.zhihu.com/people/berl…
博客园：www.cnblogs.com/berlinss/
