VUE整合ThreeJS加载压缩模型遇到的坑

 

项目场景：

刚开始接触ThreeJs，使用VUE结合的方式去开发，此次由于模型比较大要200多M直接加载速度特别慢，于是在网上找到相关压缩gftl模型的方法，具体参考：https://blog.csdn.net/weixin_43081805/article/details/88723626针对此次压缩和展现遇到的问题做一次记录。

---

问题描述：

1，模型压缩后从250M缩小到25M，还是很不错的。

2，压缩后的模型需要用DRACOLoader去加载，根据网上的说法会用到drac算法，因此在three/examples/js/libs/下找到了draco文件夹，将此文件夹直接拷贝出去，放入了assets文件夹下，然后去引用：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'
const loader = new GLTFLoader()
      // Draco 解码库
      const dracoLoader = new DRACOLoader()
      dracoLoader.setDecoderPath('assets/draco/gltf/')
      dracoLoader.setDecoderConfig({ type: 'js' })
      loader.setDRACOLoader(dracoLoader)
      loader.load(
        'static/models/test.gltf',
        (gltf) => {
          const root = gltf.scene
          this.scene.add(root)
        }
      )

最终的结果就是模型死活加载不出来。

---

原因分析：

尝试不用VUE的方式直接用原生JS的方式去写没问题，所以考虑到是不是解码JS加载出问题了，考虑到assets和static文件夹的特殊性，因此将文件放入static下试试。

---

解决方案：

直接将文件夹拷贝到static下，替换引用路径，加载成功。

dracoLoader.setDecoderPath('static/draco/gltf/')