useGLTF加载GLB失败排查：文件与URL正常但跨设备运行异常

核心问题定位 #

你遇到的情况大概率是违反React钩子调用规则导致的——useGLTF是React Three Fiber的钩子函数，必须遵循React钩子规则：只能在组件顶层或自定义钩子内调用，绝对不能在循环、forEach这类回调逻辑里执行。另一台电脑偶然能运行属于未定义行为，并非正确用法。此外还有几种环境层面的可能因素需要排查。

具体修复方案 #

1. 修正useGLTF调用方式（关键） #

把循环里的useGLTF替换为非钩子版本的loadGLTF，或者将加载逻辑放在useEffect中批量处理，彻底规避钩子调用违规问题：

示例（改用loadGLTF批量加载）：

import { loadGLTF } from '@react-three/drei'

// ... 其他代码
console.log(data);
data = JSON.parse(data);

// 用Promise.all批量处理所有GLB加载请求
Promise.all(data.map(async (p: any) => {
    try {
        const url = p.meta_data[0].value;
        console.log("path to GLB is:", url);
        const glb = await loadGLTF(url);
        console.log("Loaded GLB:", glb.scene);
        
        const obj = glb.scene.clone();
        const box = new Box3().setFromObject(obj);
        const size = new Vector3();
        box.getSize(size);
        const scaleVec = new Vector3(1, 1, 1).divide(size);
        const scale = Math.min(scaleVec.x, Math.min(scaleVec.y, scaleVec.z));
        obj.scale.setScalar(scale * 1);
        
        return { scene: obj, name: p.name };
    } catch (error) {
        console.log("Error on GLB Load:", error);
        return null;
    }
})).then(results => {
    // 过滤加载失败的模型，更新状态
    const validModels = results.filter(model => model !== null);
    setMappedModels(prev => [...prev, ...validModels]);
});

2. 排查本地环境问题 #

• 清除浏览器缓存：打开浏览器开发者工具（F12），在Network面板勾选「Disable cache」，刷新页面重新测试
• 检查跨域配置：如果GLB文件来自外部域名，确认服务器是否配置了CORS响应头；本地开发时可添加代理配置（比如Vite的proxy、Create React App的setupProxy）
• 网络环境检查：关闭当前电脑的VPN、防火墙、代理工具，确认网络请求能正常到达GLB文件服务器
• 同步依赖版本：对比两台电脑的package.json，确保@react-three/fiber、@react-three/drei、three版本完全一致，执行npm install或yarn install同步依赖

3. 补充错误日志排查 #

在catch块中打印更详细的错误信息，帮助定位具体问题：

catch (error) {
    console.error("GLB加载详细错误:", error);
    if (error instanceof Error) {
        console.error("错误堆栈:", error.stack);
    }
}

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