Three.js Demos
Three.js Demos

Three.js Lighting and Shadows Guide

This guide focuses on building readable lighting setups, tuning shadow quality, and balancing visual fidelity with frame-time budgets.

Core Concepts

Lighting models combine ambient fill with one or more directional, point, or spot lights. Accurate light balance improves depth cues and material readability more than adding many lights indiscriminately.

const ambient = new THREE.AmbientLight(0xffffff, 0.2)
const key = new THREE.DirectionalLight(0xffffff, 1.0)
key.position.set(5, 10, 4)
key.castShadow = true

Best Practices

  • Keep scene setup, update loop, and cleanup code isolated for maintainability.
  • Prefer deterministic data flow and avoid hidden side effects in frame updates.
  • Profile changes on mobile-class hardware before shipping.
  • Document control schemes and provide readable non-canvas text context for SEO.

Related Resources

← Back to Docs