如图: react18 + three.js 渲染被压缩的.glb文件时报错
// 创建gltfloader
const gltfLoader = new GLTFLoader();
gltfLoader.loadAsync(require('./model/city.glb')).then((gltf) => {
console.log(gltf);
scene.add(gltf.scene);
});
控制台报错:
Uncaught (in promise) Error: THREE.GLTFLoader: No DRACOLoader instance provided.
解决办法:
设置dracoLoader路径
https://www.gstatic.com/draco/versioned/decoders/[version]/
https://www.gstatic.com/draco/versioned/decoders/1.5.6/
版本号来自 ★ 非常重要 https://github.com/google/draco/tree/master
完整代码
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
...
// 加载被压缩的.glb文件会报错,需要draco解码器
const dracoLoader = new DRACOLoader();
// 设置dracoLoader路径
dracoLoader.setDecoderPath(
'https://www.gstatic.com/draco/versioned/decoders/1.5.6/'
);
// 使用js方式解压
dracoLoader.setDecoderConfig({ type: 'js' });
// 初始化_initDecoder 解码器
dracoLoader.preload();
// 设置gltf加载器dracoLoader解码器
gltfLoader.setDRACOLoader(dracoLoader);
gltfLoader.loadAsync(require('./model/city.glb')).then((gltf) => {
console.log(gltf);
scene.add(gltf.scene);
});
结束~