React Three Fiber添加DirectionalLight后阴影出现条纹问题求助

问题根源 #

你用的是正交相机，DirectionalLight默认的阴影相机范围过大，导致阴影贴图被过度拉伸，出现条纹。另外shadowBias设置得太极端（-0.05）也会加重这个问题。

具体修复步骤 #

• 精准限制阴影相机范围
  给方向光的阴影相机设置left/right/top/bottom参数，让它刚好包裹你的模型，避免贴图拉伸模糊：

  <directionalLight
      castShadow
      ref={directionalLightRef}
      shadowMapHeight={2048} // 适当提高贴图分辨率，增强阴影清晰度
      shadowMapWidth={2048}
      shadowCameraFar={50}
      shadowCameraLeft={-20} // 根据模型实际尺寸调整，确保完全覆盖模型
      shadowCameraRight={20}
      shadowCameraTop={20}
      shadowCameraBottom={-20}
      shadowBias={-0.001} // 降低偏移值，避免极端偏移导致的条纹
      intensity={1}
      position={[1.5, 5, 7]}
  />
  

• 完善模型阴影设置
  确保Model组件内部的所有网格，不仅开启receiveShadow，如果模型有凸起结构需要投射阴影，也要开启castShadow。

• 优化dpr参数
  可以尝试固定dpr值，避免高像素密度设备下的阴影渲染异常：

  <Canvas shadows={true} dpr={window.devicePixelRatio > 1 ? 1.5 : 1} orthographic camera={{ zoom: 200, position: [0, 5, 10] }}>
  

• 启用柔和阴影过滤
  在Canvas中配置更柔和的阴影算法，减少条纹感：

  import * as THREE from 'three'
  
  <Canvas 
      shadows={{ 
          enabled: true,
          type: THREE.PCFSoftShadowMap 
      }} 
      dpr={[1, 2]} 
      orthographic 
      camera={{ zoom: 200, position: [0, 5, 10] }}
  >
  

调试小技巧 #

可以用ShadowCameraHelper可视化阴影相机的范围，方便精准调整参数：

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

// 在directionalLight组件后添加
<ShadowCameraHelper light={directionalLightRef.current} />

调整完成后记得移除这个辅助组件，避免影响性能。

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