
About
Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance.
name: threejs-lighting description: Three.js lighting - light types, shadows, environment lighting. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance. risk: unknown source: community
Three.js Lighting
When to Use
- You need to add or tune lighting in a Three.js scene.
- The task involves light types, shadows, environment lighting, or lighting performance tradeoffs.
- You want to improve scene readability, realism, or mood through Three.js lighting setup.
Quick Start
import * as THREE from "three";
// Basic lighting setup
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
Light Types Overview
| Light | Description | Shadow Support | Cost | | ---------------- | ---------------------- | -------------- | -------- | | AmbientLight | Uniform everywhere | No | Very Low | | HemisphereLight | Sky/ground gradient | No | Very Low | | DirectionalLight | Parallel rays (sun) | Yes | Low | | PointLight | Omnidirectional (bulb) | Yes | Medium | | SpotLight | Cone-shaped | Yes | Medium | | RectAreaLight | Area light (window) | No* | High |
*RectAreaLight shadows require custom solutions
AmbientLight
Illuminates all objects equally. No direction, no shadows.
// AmbientLight(color, intensity)
const ambient = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambient);
// Modify at runtime
ambient.color.set(0xffffcc);
ambient.intensity = 0.3;
HemisphereLight
Gradient from sky to ground color. Good for outdoor scenes.
// HemisphereLight(skyColor, groundColor, intensity)
const hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.6);
hemi.position.set(0, 50, 0);
scene.add(hemi);
// Properties
hemi.color; // Sky color
hemi.groundColor; // Ground color
hemi.intensity;
DirectionalLight
Parallel light rays. Simulates distant light source (sun).
// DirectionalLight(color, intensity)
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 5);
// Light points at target (default: 0, 0, 0)
dirLight.target.position.set(0, 0, 0);
scene.add(dirLight.target);
scene.add(dirLight);
DirectionalLight Shadows
dirLight.castShadow = true;
// Shadow map size (higher = sharper, more expensive)
dirLight.shadow.mapSize.width = 2048;
dirLight.shadow.mapSize.height = 2048;
// Shadow camera (orthographic)
dirLight.shadow.camera.near = 0.5;
dirLight.shadow.camera.far = 50;
dirLight.shadow.camera.left = -10;
dirLight.shadow.camera.right = 10;
dirLight.shadow.camera.top = 10;
dirLight.shadow.camera.bottom = -10;
// Shadow softness
dirLight.shadow.radius = 4; // Blur radius (PCFSoftShadowMap only)
// Shadow bias (fixes shadow acne)
dirLight.shadow.bias = -0.0001;
dirLight.shadow.normalBias = 0.02;
// Helper to visualize shadow camera
const helper = new THREE.CameraHelper(dirLight.shadow.camera);
scene.add(helper);
PointLight
Emits light in all directions from a point. Like a light bulb.
// PointLight(color, intensity, distance, decay)
const pointLight = new THREE.PointLight(0xffffff, 1, 100, 2);
pointLight.position.set(0, 5, 0);
scene.add(pointLight);
// Properties
pointLight.distance; // Maximum range (0 = infinite)
pointLight.decay; // Light falloff (physically correct = 2)
PointLight Shadows
pointLight.castShadow = true;
pointLight.shadow.mapSize.width = 1024;
pointLight.shadow.mapSize.height = 1024;
// Shadow camera (perspective - 6 directions for cube map)
pointLight.shadow.camera.near = 0.5;
pointLight.shadow.camera.far = 50;
pointLight.shadow.bias = -0.005;
SpotLight
Cone-shaped light. Like a flashlight or stage light.
// SpotLight(color, intensity, distance, angle, penumbra, decay)
const spotLight = new THREE.SpotLight(0xffffff, 1, 100, Math.PI / 6, 0.5, 2);
spotLight.position.set(0, 10, 0);
// Target (light points at this)
spotLight.target.position.set(0, 0, 0);
scene.add(spotLight.target);
scene.add(spotLight);
// Properties
spotLight.angle; // Cone angle (radians, max Math.PI/2)
spotLight.penumbra; // Soft edge (0-1)
spotLight.distance; // Range
spotLight.decay; // Falloff
SpotLight Shadows
spotLight.castShadow = true;
spotLight.shadow.mapSize.width = 1024;
spotLight.shadow.mapSize.height = 1024;
// Shadow camera (perspective)
spotLight.shadow.camera.near = 0.5;
spotLight.shadow.camera.far = 50;
spotLight.shadow.camera.fov = 30;
spotLight.shadow.bias = -0.0001;
// Focus (affects shadow projection)
spotLight.shadow.focus = 1;
RectAreaLight
Rectangular area light. Great for soft, realistic lighting.