問題出現(xiàn)工程化項(xiàng)目中，vue、react等
微信截圖_20230329105559.png
先說解決方案：
1、找到node_modules => three => examples => jsm => libs=> draco。
2、復(fù)制draco這個(gè)文件夾，放到項(xiàng)目根目錄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擴(kuò)展壓縮過的文件。
//加載模型
loader.load( 'xxxx.glb', function ( gltf ) {
scene.add( gltf.scene ); //添加到場(chǎng)景
} );
問題出現(xiàn)的原因：
壓縮的glb模型（是壓縮的，不是所有的）依賴DRACOLoader解壓，vue、react等腳手架的代碼打包之后，拿不到node_modles下面的依賴文件。導(dǎo)致 dracoLoader.setDecoderPath( './draco/' )這個(gè)加載不到。所以把相關(guān)的依賴放到public文件中。
