Three.js中阴影出现颗粒状点阵效果的原因排查

几个常见的排查和修复方向 #

• 提高阴影贴图分辨率
  这种点阵感大多是因为阴影贴图分辨率不够导致的。你可以在useSoftShadows钩子或者灯光组件里调高贴图尺寸：

  // 使用useSoftShadows时指定mapSize
  useSoftShadows({
    blur: 4,
    mapSize: 2048, // 可换成4096，根据性能承受度调整
    near: 0.5,
    far: 50
  })
  
  // 或者给灯光单独设置阴影贴图尺寸
  <directionalLight castShadow shadow-mapSize-width={2048} shadow-mapSize-height={2048} />
  

• 校准阴影相机参数
  阴影相机的视锥体范围不合理会压缩阴影精度。调整near/far值，同时让相机的左右上下范围刚好覆盖你的阴影区域，避免浪费分辨率：

  <directionalLight castShadow>
    <orthographicCamera 
      attach="shadow-camera" 
      left={-10} right={10} top={10} bottom={-10} 
      near={0.5} far={50} 
    />
  </directionalLight>
  

• 切换阴影过滤模式
  试试把阴影过滤换成更柔和的类型，比如PCFSoftShadowMap，能有效改善点阵感：

  import { useThree } from '@react-three/fiber';
  import * as THREE from 'three';
  
  const { gl } = useThree();
  useEffect(() => {
    gl.shadowMap.type = THREE.PCFSoftShadowMap;
  }, [gl]);
  

• 检查自定义材质的阴影兼容性
  你的自定义Material组件要确保没有禁用depthWrite或depthTest，这两个属性会直接影响阴影的正常绘制。同时确认材质本身支持阴影计算（比如不要用完全透明材质，或者误关阴影相关开关）。

• 优化复杂几何体的阴影精度
  如果shapeGeometry的路径太复杂，阴影计算时容易出现精度问题。可以给几何体增加细分次数，或者简化路径：

  // 给shapeGeometry添加细分，第二个参数是细分数量
  <shapeGeometry args={[shape, 64]} />
  

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