Fixing Self-Shadowing Artifacts in Three.js

Based on the images you've shared, you're experiencing a common issue in 3D rendering called "shadow acne" or self-shadowing artifacts. This happens when a surface casts shadows onto itself due to precision issues in the shadow mapping algorithm.

Common Solutions

Here are several approaches to fix these shadow artifacts:

1. Adjust the Shadow Bias

The most common solution is to adjust the shadow bias value for your light:

JAVASCRIPTCopied
// For DirectionalLight
directionalLight.shadow.bias = -0.001;

// For SpotLight
spotLight.shadow.bias = -0.001;

// For PointLight
pointLight.shadow.bias = -0.001;

Try different small negative values until the artifacts disappear without creating other shadow issues.

2. Increase Shadow Map Resolution

Higher resolution shadow maps can reduce these artifacts:

JAVASCRIPTCopied
light.shadow.mapSize.width = 2048;
light.shadow.mapSize.height = 2048;

3. Adjust the Near/Far Planes

Optimizing the shadow camera's near and far planes can help:

JAVASCRIPTCopied
// For DirectionalLight
directionalLight.shadow.camera.near = 0.1;
directionalLight.shadow.camera.far = 100;

// For SpotLight
spotLight.shadow.camera.near = 0.1;
spotLight.shadow.camera.far = 100;

4. Use normalBias (for Three.js r137+)

For newer versions of Three.js, you can use normalBias:

JAVASCRIPTCopied
light.shadow.normalBias = 0.02;

This is particularly effective for thin objects.

5. Check for Double-Sided Materials

If your material is double-sided, try setting it to single-sided:

JAVASCRIPTCopied
material.side = THREE.FrontSide;

Additional Considerations

• Make sure renderer.shadowMap.enabled = true is set
• Consider using THREE.PCFSoftShadowMap for smoother shadows:

  JAVASCRIPTCopied
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

Try these adjustments one at a time to see which resolves your specific issue with the least side effects.