What problem does it solve?
This skill provides a concise, practical guide to implementing robust lighting in Three.js, covering ambient, directional, point, spot, and area lights, along with shadows and environment lighting.
Core Features & Use Cases
- Comprehensive light types: explains when and how to use AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, and RectAreaLight to shape scene mood and realism.
- Shadows & performance: guidance on enabling shadows, shadow map sizes, bias, and frustum tuning to balance visual quality and rendering cost.
- Environment lighting: techniques for Image-Based Lighting (IBL) with HDR environments, PMREM generation, and optional background usage.
- Helpers & debugging: tips on using light helpers to visualize light influence and diagnose scene lighting.
- Production patterns: best practices for scalable lighting setups, including layer-based lighting and organized scene illumination.
Quick Start
Create a basic lighting setup in a Three.js scene:
- Import Three.js
- Create a scene and renderer with shadow mapping enabled
- Add ambient and directional lights, enabling shadows on the latter
- Start a render loop to observe lighting changes
Example:
import * as THREE from 'three';
const scene = new THREE.Scene();
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 5, 5);
dirLight.castShadow = true;
scene.add(dirLight);
// ... continue with camera, renderer, and animation loop
