Next.js 15（App Router）构建部署后GLB模型无法显示问题

• 检查GLTF加载错误日志
  在浏览器DevTools的Console面板搜索GLTF或three.js相关报错，useGLTF加载失败会抛出未捕获异常，可能是文件解析失败（比如部署后文件损坏）。也可以手动在控制台验证：

  const res = await fetch('/heroobject.glb');
  const buffer = await res.arrayBuffer();
  new THREE.GLTFLoader().parse(buffer, '', (gltf) => console.log('解析成功', gltf), (err) => console.error('解析失败', err));
  

• 验证静态资源MIME类型
  确保Cloud Run返回的GLB文件MIME类型为model/gltf-binary，而非默认的application/octet-stream。如果用Nginx做静态服务，需在配置中添加：

  types {
    model/gltf-binary glb;
  }
  

  若直接用Next.js服务，可在next.config.ts中配置自定义响应头：

  const nextConfig = {
    async headers() {
      return [
        {
          source: '/heroobject.glb',
          headers: [{ key: 'Content-Type', value: 'model/gltf-binary' }],
        },
      ];
    },
    // 已有配置...
  };
  

• 确认依赖兼容性
  检查three、@react-three/fiber、@react-three/drei版本是否与Next.js 15兼容，部分版本组合会在生产构建后出现渲染异常。建议锁定到官方推荐的兼容版本，比如：

  {
    "three": "^0.160.0",
    "@react-three/fiber": "^8.15.0",
    "@react-three/drei": "^9.92.0"
  }
  

• 排查客户端渲染环境
  确认window.THREE在生产环境中存在，验证Three.js是否正确打包到客户端代码。也可以替换useGLTF为原生加载方式排查封装层问题：

  import { useLoader } from '@react-three/fiber';
  import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
  
  export default function Model() {
    const gltf = useLoader(GLTFLoader, '/heroobject.glb');
    return <primitive object={gltf.scene} />;
  }
  

• 检查Canvas容器尺寸
  确认<Canvas>的父容器设置了明确的宽高（比如width: 100%; height: 100vh;），生产环境下样式重置可能导致Canvas尺寸为0，模型不可见。在DevTools的Elements面板查看Canvas元素的实际渲染尺寸，若为0则调整父组件样式。

• CI/CD构建文件完整性检查
  在CI步骤中添加GLB文件哈希校验，确保部署到Cloud Run的文件与本地一致，避免构建时文件被损坏。同时检查Dockerfile是否正确复制public目录：

  COPY public/ public/
  

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