只能压缩几何体信息，贴图等材质信息不可压缩。
1. gltf 格式
使用 gltf-pipeline 和 DRACOLoader
https://github.com/CesiumGS/gltf-pipeline
安装 gltf-pipeline
Install Node.js if you don't already have it, and then:
npm install -g gltf-pipeline
通过命令行使用 gltf-pipeline
Converting a glTF to glb
gltf-pipeline -i model.gltf -o model.glb
gltf-pipeline -i model.gltf -b
Converting a glb to glTF
gltf-pipeline -i model.glb -o model.gltf
gltf-pipeline -i model.glb -j
Converting a glTF to Draco glTF
gltf-pipeline -i model.gltf -o modelDraco.gltf -d
Saving separate textures
gltf-pipeline -i model.gltf -t
使用 DRACOLoader
将项目中 node_modules\three\examples\js\libs 文件夹下的 draco 文件夹复制到静态资源文件夹下
加载代码示例
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('/draco/gltf/');
loader.setDRACOLoader(dracoLoader);
loader.load( 'model-compression/modelDraco.gltf', (gltf) => {
var model = gltf.scene;
this.scene.add( model );
});
压缩效果
压缩前：5665KB，压缩后：2160KB
2.obj + mtl 格式
使用谷歌的 draco 将 .obj 文件压缩为 .drc文件
draco github地址：https://github.com/google/draco/
.obj 模型导出时需要勾选三角化属性
如何使用Draco
下载源码 ---》 构建项目 ---》 使用命令行进行压缩或解压，具体可以参考以下文档
构建draco项目
windows下安装cmake教程（ps：公司的网络下载不下来，用流量可以）
谷歌三维压缩库Draco在window下的安装与测试
由于draco项目使用c++编写，因此需要用到 Visual Studio 来构建项目，可以参考http://www.zhanshaoyi.com/8415.html进行下载（ps：安装时需要勾选c++相关的程序工具，否则会构建失败）
压缩效果
压缩前：10.5MB.obj ， 压缩后：281KB.drc
存在问题
three.js不支持 .drc 和 .mtl 混合使用，只能将贴图和材质属性按照几何体拆分，手动进行融合，对于项目中使用的大型模型不现实。可参考文档https://zhuanlan.zhihu.com/p/95600656
3.模型拆分加载
将黑河首站的建筑模型，管道模型，地面相关模型分开导出 .obj + .mtl 文件， 如下：
分别进行加载，主要代码如下：
initContentObjMtl(mtlPath, objPath, modelName) {
let scope = this;
let objLoader2 = new OBJLoader2();
let callbackOnLoad = object3d => {
this.scene.add( object3d );
object3d.rotation.x -= 1.6;
};
let onLoadMtl = function ( mtlParseResult ) {
objLoader2.setModelName( modelName );
objLoader2.addMaterials( MtlObjBridge.addMaterialsFromMtlLoader( mtlParseResult ), true );
objLoader2.load( objPath, callbackOnLoad, null, null, null );
};
let mtlLoader = new MTLLoader();
mtlLoader.setMaterialOptions({side: THREE.DoubleSide});
mtlLoader.load( mtlPath, onLoadMtl );
},
this.initContentObjMtl("blackRiver-divided/buildings.mtl", "blackRiver-divided/buildings.obj", "buildings");
this.initContentObjMtl("blackRiver-divided/pipelines.mtl", "blackRiver-divided/pipelines.obj", "pipelines");
this.initContentObjMtl("blackRiver-divided/grounds.mtl", "blackRiver-divided/grounds.obj", "grounds");
实现效果：拆分加载模型不会影响模型的相对位置
