前端开发基础知识

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

2021-01-19  本文已影响0人  田苗苗_7785

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

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
上一篇下一篇

猜你喜欢

热点阅读