1. 程式人生 > 其它 >DRACO壓縮過後的gltf格式報錯解決辦法

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前後都要加斜槓,不加還是會報錯