three.js模型压缩/gltf/glb,gltf-pipeline

假前端
5,512 阅读1分钟

three.js模型压缩/gltf

  • 问题

    three.js模型太大，加载和请求资源耗时太长，解决办法：压缩，可压缩90%左右，100M模型缩减至10M左右

  • 工具gltf-pipeline

  • 步骤：

    • 准备一个gltf/glb模型，这里以glb示例，gltf同理，大约90M

  • 安装好gltf-pipeline 输入指令

    gltf-pipeline -i demo.glb -d -s

  • 会生成2个文件，glb和bin文件，总体积不到5M，压缩效果还是很惊人的，90M变5M

  • three.js里使用,这样使用GLTFLoader原始模型是可以的，但是加载压缩过的模型就不可以了

//原始模型  
gltfloader.load('./models/demo.glb', function (obj) {
      scene.add(obj.scene);
      console.log(obj, 'obj');
  });
  • 加载压缩过的模型代码（在GLTFLoader基础上使用到了DRACOLoader）
 THREE.DRACOLoader.setDecoderPath('three/examples/js/libs/draco/gltf/');
//设置解压库文件路径
var dracoLoader = new THREE.DRACOLoader();
gltfloader.setDRACOLoader(dracoLoader);
//压缩过的模型
gltfloader.load('./models/demo-processed.glb', function (obj) {
    scene.add(obj.scene);
    console.log(obj, 'obj');
});

这样就可以了

avatar
文章
阅读
粉丝