Three.js模型压缩和拆分加载

只能压缩几何体信息，贴图等材质信息不可压缩。

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 文件夹复制到静态资源文件夹下

image.png

image.png

加载代码示例

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 文件， 如下：

image.png

分别进行加载，主要代码如下：

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");

实现效果：拆分加载模型不会影响模型的相对位置

image.png