threejs-lightinglisted

# Three.js Lighting ## Quick Start ```javascript 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. ```javascript // 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. ```javascript // HemisphereLight(skyColor, groundColor, intensity) const hemi = new THREE.HemisphereLight(0x87ceeb, 0x8b4513, 0.6); hemi