Three.js异常条纹阴影问题咨询：灯光与网格设置成因排查

Hey there! Let’s break down those annoying striped shadows you’re encountering—these are super common issues with Three.js shadow rendering, and we can work through the most likely fixes based on typical setup mistakes.

Top Causes & Fixes #

• Low Shadow Map Resolution
  If your shadow texture is too small, it can’t capture enough detail, leading to blocky or striped shadows.
  Fix: Crank up the mapSize on your light’s shadow property. Start with 2048x2048 (balance performance and quality):

  // Example for a DirectionalLight
  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
  directionalLight.castShadow = true;
  directionalLight.shadow.mapSize.set(2048, 2048); // Try 4096 if performance allows
  

• Misconfigured Shadow Camera Frustum
  If your shadow camera’s near/far range is way too large, or its left/right/top/bottom bounds are broader than needed, the shadow map gets stretched thin—resulting in stripes.
  Fix: Narrow the shadow camera to tightly fit the area where shadows are cast. Use a CameraHelper to visualize and tweak:

  directionalLight.shadow.camera.near = 0.5;
  directionalLight.shadow.camera.far = 30;
  directionalLight.shadow.camera.left = -15;
  directionalLight.shadow.camera.right = 15;
  directionalLight.shadow.camera.top = 15;
  directionalLight.shadow.camera.bottom = -15;
  
  // Add helper to see the camera bounds (remove once adjusted)
  const shadowHelper = new THREE.CameraHelper(directionalLight.shadow.camera);
  scene.add(shadowHelper);
  

• Insufficient Geometry Subdivision
  Low-poly objects or flat surfaces with too few segments can cause shadow edges to look jagged or striped, especially when shadows are cast at an angle.
  Fix: Increase the subdivision of your geometry. For example, a plane receiving shadows:

  // Instead of default 1x1 segments
  const groundGeometry = new THREE.PlaneGeometry(20, 20, 32, 32);
  

• Incorrect Shadow Bias/Radius Settings
  Shadow "acne" (striped artifacts from self-shadowing) often comes from misadjusted bias or radius values.
  Fix: Tweak these parameters carefully—small changes go a long way:

  directionalLight.shadow.bias = -0.0001; // Reduces self-shadowing acne
  directionalLight.shadow.radius = 2; // Softens shadow edges to hide stripes
  

  Note: Don’t set bias too negative, or you’ll get "peter panning" (shadows separating from objects).

• Overlapping Shadows from Multiple Lights
  If multiple lights are casting shadows, their overlapping shadow maps can create striped patterns.
  Fix: Disable shadows on non-critical lights, or adjust each light’s shadow parameters (map size, bias) to avoid interference.

Start with checking the shadow map resolution and camera bounds first—those are the most frequent culprits. If you share your exact light/mesh code snippets, we can narrow it down even more!

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