解决threejs加载gltf文件报错 No DRACOLoader

本文主要是介绍解决threejs加载gltf文件报错 No DRACOLoader，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

解决threejs加载gltf文件报错 No DRACOLoader

错误描述

Error: THREE.GLTFLoader: No DRACOLoader instance provided.at new GLTFDracoMeshCompressionExtension (GLTFLoader.js:1669:10)at GLTFLoader.parse (GLTFLoader.js:321:37)at Object.eval [as onLoad] (GLTFLoader.js:159:11)at eval (three.module.js:41910:38)

解决, 使用 DRACOLoader 加载

封装 DRACOLoader 加载器 dracoLoader.js

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { MessageBox, Message } from 'element-ui';
import Vue from 'vue';let loading;
// 加载gtlf文件
export function dracoLoader(path) {loading = Vue.prototype.$loading({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)',});return new Promise((resolve) => {const loader = new GLTFLoader(new LoadingManager()); const dracoLoader = new DRACOLoader(); ///*设置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*/dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/'); dracoLoader.setDecoderConfig({ type: 'js' }); //使用js方式解压dracoLoader.preload(); //初始化_initDecoder 解码器loader.setDRACOLoader(dracoLoader); //gltfloader使用dracoLoaderloader.load(path,(gltf) => {resolve(gltf);setTimeout(() => {loading.close();}, 500);},() => {},(err) => {console.log(err);Message({message: `加载失败: ${err.message}`,type: 'error',duration: 3000,});setTimeout(() => {loading.close();}, 500);});});
}

使用

import { dracoLoader } from './dracoLoader.js';dracoLoader('/three/model/man.glb').then((res) => {console.log(res.scene)this.scene.add(res.scene);}).catch((err) => {console.log(err);});