Luces
Hágase la luz
La luz es lo que da volumen al 3D. Sin sombras ni luces, el cerebro humano no puede interpretar la profundidad. En Three.js, añadir luces es similar a posicionar focos en un estudio fotográfico. Tienes diferentes tipos para diferentes necesidades.
Los Cuatro Tipos Principales
- AmbientLight (Luz de Relleno):
Es una luz que viene de todas direcciones al mismo tiempo. No tiene fuente ni dirección, por lo que NO proyecta sombras. Se usa para que las partes "oscuras" de tu objeto no queden 100% negras, sino tenuemente visibles. - DirectionalLight (El Sol):
Es una luz que viene desde infinitamente lejos (como el sol). Todos sus rayos son paralelos. Es la luz principal para generar sombras duras e iluminar escenarios enteros de forma uniforme. - PointLight (La Bombilla):
Es una luz que nace de un punto específico y se expande en todas direcciones (como una vela o una bombilla). Su intensidad disminuye a medida que te alejas de ella (esto se llama decay). - SpotLight (El Foco):
Un cono de luz, como los de un escenario de teatro o los faros de un coche. Tienes control total sobre su ángulo, penumbra y distancia.
Sombras: El devorador de rendimiento
Las sombras en el mundo digital son extremadamente caras matemáticamente. Por eso, en Three.js vienen desactivadas por defecto en TODOS los objetos y en el Renderer. Para activarlas, necesitas un proceso de 4 pasos:
- Avisar al Renderer:
renderer.shadowMap.enabled = true; - Avisar a la Luz que proyecte:
light.castShadow = true; - Avisar al Objeto que bloquee la luz:
mesh.castShadow = true; - Avisar al Suelo que reciba la sombra:
suelo.receiveShadow = true;
Consejo profesional
Las sombras pueden verse dentadas (como si fueran de Minecraft). Para suavizarlas, aumenta el tamaño del mapa de sombras de la luz: light.shadow.mapSize.width = 2048 y light.shadow.mapSize.height = 2048. ¡Pero ojo, esto baja el rendimiento!
El Setup de Iluminación Clásico
// 1. Luz Ambiental (Relleno base, color blanco, intensidad 0.2)
const ambient = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambient);
// 2. Luz Direccional (El Sol, intensidad 1)
const sun = new THREE.DirectionalLight(0xffffff, 1);
sun.position.set(5, 5, 2);
// 3. Activar sombras en la luz
sun.castShadow = true;
sun.shadow.camera.near = 0.5;
sun.shadow.camera.far = 15;
scene.add(sun);
// 4. Activar sombras en Renderer y Meshes
renderer.shadowMap.enabled = true;
// El objeto proyecta sombra
mesh.castShadow = true;
// El suelo la recibe
plane.receiveShadow = true;PointLight (roja y azul) moviéndose sobre una geometría blanca.
Errores comunes
Practica lo aprendido
Ilumina tu escena con drama.