React Three Fiber阴影不显示问题求助

已完成以下配置但阴影仍不显示：

• 方向光添加castShadow属性
• 模型（primitive组件）添加castShadow/receiveShadow属性
• Canvas组件配置shadows或shadowMap属性

原始代码片段 #

组件内部渲染代码：

return(
  <>
    <OrbitControls/>
    <axesHelper args={[500, 500, 500]} /> 
    <Environment preset="sunset" background />
    <directionalLight
        ref={directionalLightRef}
        intensity={1}
        position={[-250,200,0]}
        color="#fdfbfb"
        castShadow 
    />
    <group>
        <primitive
            object={office_objects.scene} 
            scale={1.1}
            position={[100,-2,0]}
            castShadow receiveShadow
        />
        <primitive
            object={floor.scene} 
            scale={1.1}
            position={[100,0,0]}
            receiveShadow
        /> 
        <primitive
            object={monitor.scene} 
            scale={1.1}
            position={[100,-0.5,0]}
            castShadow receiveShadow
            onClick={handleModelClick} 
        /> 
    </group> 
   </>
);

Canvas配置：

<Canvas 
    shadows
    camera = {{
      position: [300,100,0],
      near: 10,
      far: 1000
    }} 
>

尝试替换的shadowMap配置：

<Canvas 
    shadowMap
    camera = {{
      position: [300,100,0],
      near: 10,
      far: 1000
    }} 
>

排查方向与解决方案 #

• 调整方向光阴影相机范围
  方向光默认阴影相机的视锥体范围很小，你的场景尺度较大（轴助手尺寸500），需要手动扩展阴影相机覆盖范围：

  <directionalLight
      ref={directionalLightRef}
      intensity={1}
      position={[-250,200,0]}
      color="#fdfbfb"
      castShadow
      shadow={{
        camera: {
          left: -500,
          right: 500,
          top: 500,
          bottom: -500,
          near: 10,
          far: 1000
        },
        mapSize: [2048, 2048] // 可选，提升阴影清晰度
      }}
  />
  

• 修复Primitive组件阴影属性继承问题
  primitive组件的castShadow/receiveShadow仅作用于根对象，不会递归应用到模型的子网格。需遍历模型所有子对象开启阴影：

  useEffect(() => {
    // 处理office_objects模型
    office_objects.scene?.traverse(obj => {
      if (obj.isMesh) {
        obj.castShadow = true;
        obj.receiveShadow = true;
      }
    });
    // 处理floor模型
    floor.scene?.traverse(obj => {
      if (obj.isMesh) obj.receiveShadow = true;
    });
    // 处理monitor模型
    monitor.scene?.traverse(obj => {
      if (obj.isMesh) {
        obj.castShadow = true;
        obj.receiveShadow = true;
      }
    });
  }, [office_objects, floor, monitor]);
  

• 统一Canvas阴影配置
  React Three Fiber中shadows是封装好的简化配置，shadowMap是底层配置，两者不要混用。建议保留shadows配置即可：

  <Canvas 
    shadows
    camera={{ position: [300,100,0], near: 10, far: 1000 }} 
  >
  

• 排查环境光干扰
  <Environment>组件的环境光强度可能过高，掩盖方向光阴影。可降低强度或暂时移除测试：

  <Environment preset="sunset" background intensity={0.5} />
  

• 检查模型位置合理性
  当前floor的y轴位置是0，office_objects的y轴是-2，monitor的y轴是-0.5，模型可能位于floor下方，导致阴影无法投射到floor表面。需确认模型坐标系，调整position使模型处于floor上方。

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