解决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;
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. setDecoderPath ( 'https://www.gstatic.com/draco/versioned/decoders/1.5.6/' ) ;
dracoLoader. setDecoderConfig ( { type : 'js' } ) ;
dracoLoader. preload ( ) ;
loader. setDRACOLoader ( dracoLoader) ;
loader. 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) ;
} ) ;