已提供DRACOLoader仍报错？Three.js加载GLB模型问题咨询

核心原因 #

你的代码存在两个关键问题：

1. 错误的导入路径：你导入的GLTFLoader和DRACOLoader并非Three.js官方提供的正确模块，导致setDRACOLoader方法无法正确关联到GLTFLoader实例，DRACO解码器无法被正常调用。
2. 首次加载未配置DRACOLoader：初始的GLTFLoader实例未绑定DRACOLoader，直接加载DRACO压缩的GLB模型必然触发报错，后续错误回调的加载逻辑虽配置了DRACOLoader，但并未解决根本问题。

解决方案 #

1. 修正导入路径

从Three.js官方示例模块路径导入正确的加载器：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

确保项目依赖的three包为稳定版，且加载器版本与Three.js核心版本完全匹配。

2. 初始化时直接配置DRACOLoader

无需等到报错再尝试加载，直接在初始化阶段为GLTFLoader绑定DRACOLoader，简化逻辑：

// 全局初始化一次加载器即可，避免重复创建
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("/static/draco/");
dracoLoader.setDecoderConfig({ type: "js" });

const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);

function load(model, onModelLoad) {
    loader.load(model, onModelLoad, undefined, (loadingError) => {
        logger.error(loadingError);
    });
}

3. 验证DRACO文件完整性

确保/static/draco/目录下包含完整的解码器文件：

• draco_decoder.js
• draco_decoder.wasm（可选，WASM解码性能优于JS，建议同时放置）
• draco_encoder.js（无需模型编码时可忽略）

额外注意事项 #

• 避免重复创建GLTFLoader和DRACOLoader实例，全局复用可减少性能开销。
• WebXR场景中需检查模型的缩放、位置是否适配XR空间，避免因模型尺寸问题导致视觉上“未显示”的假象。

内容的提问来源于stack exchange，提问作者Furious Gamer