问题出现工程化项目中，vue、react等

微信截图_20230329105559.png

先说解决方案：

1、找到node_modules => three => examples => jsm => libs=> draco。
2、复制draco这个文件夹，放到项目根目录public文件中
3、使用方式(伪代码)：

//引入依赖
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader'; //模型解压缩
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'; //模型加载器
//初始化
const dracoLoader = new DRACOLoader();
const loader = new GLTFLoader()

//使用
dracoLoader.setDecoderPath( './draco/' )  // 注意路径，确保public下面有draco文件夹
loader.setDRACOLoader( dracoLoader ); //用于解码使用KHR_draco_mesh_compression扩展压缩过的文件。
//加载模型
loader.load( 'xxxx.glb', function ( gltf ) {
    scene.add( gltf.scene );  //添加到场景
} );

问题出现的原因：

压缩的glb模型（是压缩的，不是所有的）依赖DRACOLoader解压，vue、react等脚手架的代码打包之后，拿不到node_modles下面的依赖文件。导致 dracoLoader.setDecoderPath( './draco/' )这个加载不到。所以把相关的依赖放到public文件中。