问题出现工程化项目中,vue、react等
先说解决方案:
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文件中。