React项目中3D衬衫模型无报错但无法显示求助

一、立即修复的明显错误 #

1. index.jsx 导出错误 #

你定义了自定义组件CanvasModel，但最后错误导出了@react-three/fiber的Canvas组件，导致你的自定义逻辑根本没被渲染。修改最后一行导出语句：

// index.jsx 末尾
export default CanvasModel

二、Shirt组件的潜在问题排查 #

1. 模型文件位置校验 #

确保shirt_baked.glb放在项目的public目录下（React项目中根路径资源必须存放在public文件夹），否则useGLTF('/shirt_baked.glb')会加载失败。如果模型在子目录，比如public/models/shirt_baked.glb，路径要改为'/models/shirt_baked.glb'。

2. 模型节点与材质名称匹配 #

打开你的glb模型文件（用Blender、Three.js Editor或glTF Viewer均可），确认节点名称确实是T_Shirt_male、材质名称是lambert1——大小写、拼写完全一致是关键，很多时候模型加载失败就是因为名称不匹配。

3. 加载状态与错误捕获 #

给useGLTF添加状态监听，确认模型是否真的加载成功：

// Shirt.jsx 中修改useGLTF的使用
import { useEffect } from 'react';

const { nodes, materials, error, loading } = useGLTF('/shirt_baked.glb');

// 调试用：打印加载状态
useEffect(() => {
  if (loading) console.log('模型加载中...');
  if (error) console.error('模型加载失败:', error);
}, [loading, error]);

// 加载中/出错时显示占位提示
if (loading) return <mesh><boxGeometry /><meshBasicMaterial color="gray" /></mesh>;
if (error) return <mesh><boxGeometry /><meshBasicMaterial color="red" /></mesh>;

4. 材质属性兼容性问题 #

你给mesh设置了material-roughness={1}，但lambert1如果是Lambert材质，它并不支持roughness属性（该属性属于MeshStandardMaterial）。如果需要调整粗糙度，替换材质类型：

<mesh
  castShadow
  geometry={nodes.T_Shirt_male.geometry}
  dispose={null}
>
  <meshStandardMaterial
    map={materials.lambert1?.map} // 继承原材质的贴图
    roughness={1}
  />
</mesh>

三、其他影响因素排查 #

1. 相机视角问题 #

临时移除CameraRig组件，直接在Canvas中渲染Shirt，测试是否能显示——如果能显示，说明CameraRig的相机位置/视角设置错误，导致看不到模型：

// index.jsx 临时修改
<Canvas>
  <ambientLight intensity={0.5} />
  <Environment preset='city' />
  <Center>
    <Shirt />
  </Center>
</Canvas>

2. 光照不足问题 #

虽然你添加了环境光和环境贴图，但如果模型材质反光不足，可能看起来像没显示。临时添加方向光测试：

<directionalLight position={[5, 5, 5]} intensity={1} castShadow />

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