threejs-lighting

SKILL.md

Complete Three.js lighting system covering all light types, shadows, and environment-based illumination.

Supports six light types (ambient, hemisphere, directional, point, spot, rect area) with detailed shadow configuration for each, including map size, camera frustum, bias tuning, and softness controls

Includes environment lighting via HDR and cube textures with PMREM generation, light probes for ambient capture, and contact shadows as a fast alternative

Provides three production-ready setups: three-point studio lighting, outdoor daylight with hemisphere gradients, and indoor area lighting with multiple rect lights

Features performance optimization guidance including light layer masking, shadow frustum tightening, and baked lighting strategies for complex scenes

Three.js Lighting

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