threejs 加载draco 压缩后文件

271 阅读1分钟

为了优化模型大小有一种方案就是对模型进行draco压缩,那么在threejs中我们如何对压缩过后的gltf/glb模型进行加载呢?

首先的想到的就是theejs有没draco相关解压库,文档一查哦豁果然有,然后按官方文档一通操作,解压成功并且加载出了模型。但是当我们打包出来启动服务访问程序却发现找不到需要用于解压的文件【目前测试使用的是umi】。

于是又想到我们是不是可以把用于解压的文件放到资源目录那么不就可以访问到了吗? 就有了以下方法

这里我采取的是防止根public目录下 即将\node_modules\three\examples\jsm\libs\draco 文件复制到public下,写法改成以下写法即可,需要注意不要跨版本复制这个文件,不同版本下的可能引起解压异常

// @ts-ignore
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// @ts-ignore
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";

---------------------

  const loader = new GLTFLoader();

  // 模型压缩过需要解压
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("/draco/");
  loader.setDRACOLoader(dracoLoader);
  //  载入模型
  loader.load("xxx.glb",(gltf: { scene: Object3D<Event> }) => {
      scene.add(gltf.scene);
    }
  );