使用three.js的时候报THREE.DRACOLoader: Unexpected geometry type.错误，如何解决？

Question

let wheels = [];
      let carBody, frontCar, hoodCar, glassCar;
      const loader = new GLTFLoader();
      const dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath("/roadSter/draco/gltf/");
      loader.setDRACOLoader(dracoLoader);
      loader.load("/roadSter/model/bmw01.glb", gltf => {
        console.log(gltf);
        const bmw = gltf.scene;
        bmw.traverse(child => {
          if (child.isMesh) {
            // console.log(child);
          }
          // 轮毂
          if (child.isMesh && child.name.includes("轮毂")) {
            child.material = wheelsMaterial;
            wheels.push(child);
          }
          // 车身
          if (child.isMesh && child.name.includes("Mesh002")) {
            carBody = child;
            carBody.material = this.bodyMaterial;
          }
          // 前脸
          if (child.isMesh && child.name.includes("前脸")) {
            frontCar = child;
            frontCar.material = this.frontMaterial;
          }
          // 引擎盖
          if (child.isMesh && child.name.includes("引擎盖_1")) {
            hoodCar = child;
            hoodCar.material = this.hoodMaterial;
          }
          // 挡风玻璃
          if (child.isMesh && child.name.includes("挡风玻璃")) {
            glassCar = child;
            glassCar.material = this.glassMaterial;
          }
        });
        this.scene.add(bmw);

这是模型的代码
这是文件所在的位置

加载模型的时候，控制台报这个错误
麻烦各位大佬，哪里出错了

Answer 1

THREE.DRACOLoader: Unexpected geometry type 错误是因为 DRACO 压缩的模型文件存在问题，或者加载的路径设置不对导致的，你检查一下 DRACO 解码器路径和模型文件路径看看对不对

Answer 2

导致这个报错有两种可能，需要逐一排除：

• 可能性一：THREE.DRACOLoader.setDecoderPath('url')中设置的draco解压器之url路径不正确。
• 可能性二：draco解压器路径正确但版本与当前Three.js不匹配。

对于可能性一，请修正draco的url。
对于可能性二，请引入版本相符的draco。引入方法，在本项目下的node_modules目录下，找到draco解压器，路径为：node_modules\three\examples\js\libs，如下图所示：

然后引入之。

经过以上操作，THREE.DRACOLoader: Unexpected geometry type报错即可消失。

参考资料：压缩gltf/glb模型踩坑与解决 three.js DRACOLoader-作者：lgldl

Answer 3

threejs从0.138升级到0.152后出现这个问题。解决方式是，将draco也同步更新。https://github.com/mrdoob/three.js/pull/25475 https://github.com/mrdoob/three.js/pull/25475/commits/baf0f13c5ae793a07a57f9c2e61b9b201b3a55cf

Answer 4

解决了
原因：是draco版本与项目安装的three版本不对
解决方法：以vite脚手架为例 node_modules\three\examples\jsm\libs\ 下的darco文件夹拷贝到 public\ 下，之后报错就解决了。