gltf文件类型过大 webGL项目模型加载过慢 压缩优化100%解决

1.第一步

npm install -g gltf-pipeline						 // 安装压缩gltf插件

2.第二步

在这里我们对文件进行压缩: 如图所示在这里shanghai.gltf压缩为shanghaiDraco.gltf

gltf-pipeline -i public/seraphine/shanghai.gltf -o public/seraphine/shanghaiDraco.gltf -d

3.第三步

找到node_modules\three\examples\js\libs\draco\gltf找到gltf文件夹复制到public

引入代码片段

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'

 const dracoLoader = new DRACOLoader().setDecoderPath('gltf/')    //放在public下的文件夹
 dracoLoader.setDecoderConfig({ type: 'js' })                     //js编译 这句很重要
 dracoLoader.preload()                                            //完全加载 加载完毕
 const loader = new GLTFLoader()
 loader.setDRACOLoader(dracoLoader)
 loader.load('seraphine/shanghaiDraco.gltf', gltf => {
      const model = gltf.scene
      scene.add(model)
 }

结语

因为遇到这个坑之后没有找到对应的解决方法，所以写了该文章作为记录也给遇到相同问题的开发者避坑。