React+Three.js项目：<mesh>标签不被识别，3D模型加载失败

1. 修正导出错误 #

你的代码最后导出的是Computers组件，但React Three Fiber的JSX标签（如<mesh>、<hemisphereLight>）只有在Canvas提供的Three.js上下文里才会被解析，直接导出Computers会让这些标签被当作普通HTML标签，自然不被浏览器识别。

把导出语句改成：

export default ComputerCanvas;

2. 调整组件结构（灯光不能作为mesh的子元素） #

<hemisphereLight>和<pointLight>是场景级别的灯光对象，不能嵌套在<mesh>内部，这会导致Three.js无法正确处理灯光，进而影响模型渲染。修改Computers组件：

const Computers = () => {
  const computer = useGLTF('./desktop_pc/scene.gltf');

  return (
    <>
      <hemisphereLight intensity={0.15} groundColor="black" />
      <pointLight intensity={1} />
      <mesh>
        <primitive object={computer.scene} />
      </mesh>
    </>
  );
};

3. 检查依赖与资源路径 #

• 确认已安装所有必需依赖：three、@react-three/fiber、@react-three/drei，尽量保持版本兼容
• 核对./desktop_pc/scene.gltf的路径是否正确，确保模型文件放在项目静态资源目录（如public文件夹）中，或使用正确的相对导入路径

4. 调试补充建议 #

• 打开浏览器控制台，查看是否有资源加载失败的报错，确认模型文件能被正常请求
• 如果模型加载缓慢，检查Preload组件是否生效，或确认模型文件体积是否过大

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