有时在开发过程中，需要引入一些很大的模型，如果不做任何处理性能会很低，
可以在使用Blender导出模型时进行压缩：

右侧菜单栏/Data/Compression

压缩过的模型在threeJs中加载时，不能直接使用GLTFLoader进行加载，
如果直接使用GLTFLoader加载Draco压缩模型，会报错：

1

No DRACOLoader instance provided.

需要引入另一个压缩模型的加载器：DRACOLoader，
用到DRACOLoader时，遇到了不少坑

如果加载未经过draco压缩的模型，会报错，
我原本理解错误，以为对模型压缩的步骤是在Loader过程中实现的，
实际上压缩模型需要在Blender里面完成，
DRACOLoader只是针对压缩模型的一个加载器。

网上有不少地方说配置路径可以通过复制draco git仓库的readme文档中提供的url实现：

1

dLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.7/')

一开始我也是这么配置的，但是比较了一下模型的加载速度，
好像没有多大变化，我以为是路径配置错误，
于是就开始下面一错再错的痛苦经历：

threejs中的DRACOLoader类要解析压缩模型需要几个关键解析文件：

• draco_decoder.js Emscripten-compiled decoder
• draco_decoder.wasm WebAssembly decoder
• draco_wasm_wrapper.js JavaScript wrapper

好的我已经看不懂了，反正三个都是解码器。
总之DRACOLoader的decoderPath解码路径只要指向这三个文件就行了，
在包管理器中，这三个文件目录如下：

three/examples/jsm/libs/draco/

那是不是把解码器路径配置成上面这个就行了？

1

dLoader.setDecoderPath('/examples/jsm/libs/draco/')

还是报错：

Uncaught SyntaxError: Unexpected token ‘<’ (at f11573a6-dd88-4e61-930c-e24ebf877308:2:1)

报的是语法错误，说明解析有问题，解析文件没有获取到。

在网上翻到了这篇博文：

把刚才的draco文件移动到public文件夹，在浏览器端运行时可以获取到，draco模型正常加载：

1
2
3
4
5
6
7
8
9
10

const loader = new GLTFLoader()
const dLoader = new DRACOLoader()
dLoader.setDecoderPath('public/draco/')
dLoader.setDecoderConfig({type:'js'})
loader.setDRACOLoader(dLoader)

loader.load('assets/lamborghini_centenario_roadster_sdc.glb',gltf=>{
    scene.add(gltf.scene)
    gltf.scene.traverse(model=>model.castShadow = true)
})