DRACO压缩过后的gltf格式报错解决办法

谷歌浏览器报错信息如下:
Uncaught SyntaxError: Unexpected token '<'

在加载draco算法,也是根据网上方法引用该文件路径,结果就报错,我是使用 Parcel 打包构建。
dracoLoader.setDecoderPath("/three/examples/js/libs/draco/gltf/");

解决方法就是把该目录下文件放在静态文件中。静态文件目录:/static/gltf

3D模型是使用3dmax建的模型,导出fbx格式文件。采用 FBX2glTF 转换成 gltf

npm install -g FBX2glTF

然后进入node_global\node_modules\fbx2gltf\bin\Windows_NT目录
> .\FBX2glTF.exe -i .\lou.FBX -b -d

点击查看代码
function loadDRACOModel() {
	let loader = new GLTFLoader();
	let dracoLoader = new DRACOLoader();
	// 加载draco算法,这样才能解析压缩后的gltf模型格式,具体的draco算法文件,
	// 直接可以three依赖文件中找到,赋值到static目录下面就好了
	dracoLoader.setDecoderPath("/gltf/");
	dracoLoader.setDecoderConfig({type: 'js'});
	dracoLoader.preload();      // 初始化 initDecoder 解码器
	loader.setDRACOLoader(dracoLoader);
	
	loader.load("/gltf/lou.glb", //引入压缩的gltf模型
		function (obj) {
			console.log(obj)
			scene.add(obj.scene);
		},
		function(xhr) {
			console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
		},
		function(error) {
			console.error(error)
		}
	);
}

完美解决,不报错了,记住gltf前后都要加斜杠,不加还是会报错


posted @ 2021-12-06 17:46  90℃_smile  阅读(1314)  评论(0编辑  收藏  举报