three.js DRACOLoader加载压缩模型

gltf、glb模型经过3D软件压缩导出后，在threejs用gltfloader加载，必须借助DRACOLoader解压，否则会报错。

首先，用到的库：

GLTFLoader.js      three.js\examples\jsm\loaders\GLTFLoader.js
DRACOLoader.js    three.js\examples\jsm\loaders\DRACOLoader.js
DRACOLoader解码库  three.js\examples\js\libs\draco\gltf

具体代码：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { DRACOLoader  } from 'three/examples/jsm/loaders/DRACOLoader'
import {LoadingManager} from 'three'
 
const loader = new GLTFLoader(new LoadingManager());  //实时显示进度
DRACOLoader.setDecoderPath( 'three.js/examples/js/libs/draco/gltf/' );//设置解压库文件路径
const dracoLoader = new DRACOLoader();  //
dracoLoader.setDecoderConfig({type: 'js'})  //使用js方式解压
dracoLoader.preload()  //初始化_initDecoder 解码器
loader.setDRACOLoader(dracoLoader)   //gltfloader使用dracoLoader
 
let url = "models/yalj.glb"
loader.load(url, ({scene}) => {
    //处理加载过来的模型
} , xhr => {
    //处理加载的进度
}, error => {
    //加载错误时触发
})

错误处理

出现这样的错误，是没有正确配置解码器

dracoLoader.setDecoderConfig({type: 'js'})  //使用js方式解压
dracoLoader.preload()  //初始化_initDecoder 解码器