Three.js Lights Demo

Este proyecto es una demostración interactiva de las diferentes técnicas de iluminación disponibles en Three.js. Se utiliza lil-gui para modificar las propiedades de las luces en tiempo real y visualizar cómo afectan a los objetos 3D en la escena.

💡 Luces Utilizadas

A continuación, una breve explicación de cada tipo de luz implementada en este proyecto:

1. AmbientLight (Luz Ambiental)

• Descripción: Ilumina todos los objetos de la escena por igual desde todas las direcciones. No tiene una dirección específica y no proyecta sombras.
• Uso: Se utiliza para simular la luz dispersa del ambiente, evitando que las zonas no iluminadas queden completamente negras.

2. DirectionalLight (Luz Direccional)

• Descripción: Emite luz en una dirección específica. Los rayos de luz son paralelos, como si la fuente estuviera infinitamente lejos.
• Uso: Ideal para simular la luz del sol o cualquier fuente de luz muy lejana.

3. HemisphereLight (Luz Hemisférica)

• Descripción: Una fuente de luz posicionada directamente sobre la escena, con un color que se desvanece desde el cielo hasta el color del suelo.
• Uso: Proporciona una iluminación ambiental más natural y realista que la AmbientLight, simulando el rebote de la luz en el suelo.

4. PointLight (Luz Puntual)

• Descripción: Emite luz en todas las direcciones desde un punto único en el espacio, similar a una bombilla o una luciérnaga. Su intensidad disminuye con la distancia.
• Uso: Perfecta para lámparas, focos de luz pequeños o efectos de partículas emisoras de luz.

5. RectAreaLight (Luz de Área Rectangular)

• Descripción: Emite luz desde una superficie rectangular plana de manera uniforme.
• Uso: Simula luces de ventanas brillantes, tiras de luz de neón o pantallas de televisión. Nota: Solo funciona con materiales MeshStandardMaterial y MeshPhysicalMaterial.

6. SpotLight (Luz Focal)

• Descripción: Emite luz desde un punto en una dirección, formando un cono de luz. Este cono se puede controlar mediante su ángulo y penumbra.
• Uso: Ideal para linternas, focos de escenario o luces de seguimiento.

🛠 Controles

El proyecto incluye un panel de control (lil-gui) en la esquina superior derecha donde puedes:

• Activar/desactivar cada luz.
• Ajustar la intensidad, color y posición.
• Visualizar los "Helpers" (ayudantes visuales) para entender mejor la posición y dirección de cada luz.

🚀 Cómo ejecutar

Clona el repositorio e instala las dependencias:

pnpm install

Inicia el servidor de desarrollo:

pnpm dev