Build Three.js lighting rigs - ambient, hemisphere, directional, point, spot, and area lights, plus shadow maps and image-based environment lighting, with notes on cost and performance.
---
name: threejs-lighting
description: Reference for Three.js lighting - light types, shadows, and environment/IBL setup with performance tradeoffs. Use when adding lights, configuring shadows, or tuning illumination.
---
Guide to choosing and configuring lights in Three.js.
## How to use
1. Pick light types by cost and need: `AmbientLight`/`HemisphereLight` (cheap, no shadows) for fill; `DirectionalLight` (sun) for cheap shadows; `PointLight`/`SpotLight` for localized sources; `RectAreaLight` for soft area light.
2. Combine a low-intensity ambient or hemisphere fill with a key directional light positioned off-axis for natural depth.
3. Enable shadows with `light.castShadow = true`, set `shadow.mapSize` (e.g. 2048) for sharpness, and tune the shadow camera frustum (`near`/`far`/bounds) to fit the scene.
4. For realism, load an HDR environment and use it via the scene environment / IBL so PBR materials pick up reflections; keep shadow-casting lights few to control GPU cost.
Full skill & source: https://github.com/CloudAI-X/threejs-skills/tree/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-lighting