Lights in Three.js

Lights are crucial in 3D graphics for illuminating your scene and making objects visible. Three.js provides several types of lights, each with unique characteristics and use cases:

AmbientLight

An AmbientLight globally illuminates all objects in the scene equally. It has no direction and cannot cast shadows. Its primary purpose is to provide a base level of illumination, faking indirect lighting, and its position in the scene does not affect the lighting.

const ambientLight = new THREE.AmbientLight(0x404040); // soft white light

DirectionalLight

A DirectionalLight simulates light coming from an infinitely far away source, like the sun. All light rays produced by a DirectionalLight are parallel. It is commonly used to represent daylight and can cast shadows. The direction of the light is determined by its position relative to its target.

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // white light, half intensity
directionalLight.position.set(1, 1, 1).normalize(); // from top-right-front

PointLight

A PointLight emits light from a single point in all directions, similar to a bare lightbulb. It can cast shadows and has properties for distance (maximum range) and decay (how the light dims over distance).

const pointLight = new THREE.PointLight(0xff0000, 1, 100); // red light, full intensity, 100 units distance
pointLight.position.set(0, 10, 0);

SpotLight

A SpotLight emits from a single point in a specific direction, forming a cone of light that increases in size further from the source. SpotLight can cast shadows and has parameters like angle (maximum dispersion), penumbra (percentage of the cone attenuated), distance, and decay. It also has a target property, allowing it to point at a specific object or position.

const spotLight = new THREE.SpotLight(0x00ff00, 1, 100, Math.PI / 4, 0.5, 2); // green light
spotLight.position.set(0, 10, 0);
spotLight.target.position.set(0, 0, 0);
scene.add(spotLight.target); // target must be added to the scene

Example: Demonstrating Different Light Types

This example shows a scene with a sphere and a plane, illuminated by different types of lights. You can observe how each light type affects the scene.