Roger Chi

Checklist for Three.js shadow casting

category: Web development
2019-08-01
Three.jsWebGL

This is a checklist to refer to if your Three.js scene doesn’t cast shadow as intended.

  1. Renderer’s shadowMap must be enabled.
renderer.shadowMap.enabled = true
  1. Use lights that support shadow casting, which currently are DirectionalLight, PointLight and SpotLight.
  2. The light’s castShadow must be set to true.
  3. The castShadow property of the object to cast a shadow must be set to true.
  4. The receiveShadow property of the object to receive a shadow must be set to true.
  5. If all above are set and there’s still no shadow, check your light’s shadowCamera's view frustum and make sure shadow casters and receivers are all inside the frustum.

Based on Three.js version r107.