In the previous chapters, we've learned how to build and position our 3D objects. Now, it's time to make them look truly alive by introducing light. Just like in the real world, light plays a crucial role in how we perceive shapes, textures, and depth. Three.js offers several types of lights, each with its own characteristics and use cases. Understanding these light types is fundamental to creating visually appealing and realistic 3D scenes.
Let's explore the primary light types available in Three.js:
- Ambient Light: The All-Encompassing Glow
Ambient light is the simplest form of lighting. It's like a general, diffused light that illuminates everything in the scene equally, regardless of its position or orientation. It doesn't cast shadows and doesn't have a direction. Ambient light is great for adding a subtle overall brightness to your scene and preventing completely dark areas. It's often used in conjunction with other light types to soften harsh shadows and give a more balanced look.
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);In this code snippet, 0xffffff represents the color white, and 0.5 is the intensity. You can adjust these values to control the brightness and color of the ambient light.
- Directional Light: The Sun's Rays
Directional light simulates a distant light source, such as the sun. It emits light in a single direction, meaning all rays of light are parallel. This type of light is perfect for creating strong, consistent lighting across your entire scene, and it's the only light type that can cast realistic shadows. The position of a directional light doesn't matter; only its direction does. You define its direction using a Vector3.
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);Here, the light is positioned at (1, 1, 1), but its effect is determined by the direction it's pointing. By default, it points towards the origin (0, 0, 0). You can also set its target property to explicitly control its direction.
- Point Light: A Light Bulb in the Room
A point light originates from a single point in space and radiates light equally in all directions. This is similar to a bare light bulb. As you move away from a point light, its intensity decreases (simulating falloff). Point lights can cast shadows, making them useful for simulating localized light sources like lamps or candles.
const pointLight = new THREE.PointLight(0xff0000, 1, 100);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);The third argument in THREE.PointLight (100 in this example) is the distance, which controls how far the light's influence extends. The decay property (not shown but defaults to 2) simulates the falloff of light intensity with distance.
- Spot Light: A Focused Beam
A spot light is like a cone of light, originating from a single point and directed in a specific direction. Think of a spotlight on a stage or a flashlight beam. It has properties like angle (the spread of the cone) and penumbra (the softness of the edge of the cone). Spot lights can also cast shadows.
const spotLight = new THREE.SpotLight(0x00ff00, 1);
spotLight.position.set(-10, 10, 0);
spotLight.target.position.set(0, 0, 0);
scene.add(spotLight);Here, the spotLight is positioned at (-10, 10, 0) and its target.position is set to (0, 0, 0), meaning the beam of light is directed towards the origin. You can adjust the angle and penumbra properties to fine-tune the appearance of the spotlight.
Visualizing Light Types
graph TD;
A[Ambient Light] --> B(Illuminates All);
C[Directional Light] --> D(Parallel Rays);
E[Point Light] --> F(Radiates From a Point);
G[Spot Light] --> H(Conical Beam);
Experimenting with different light types and their properties is key to achieving the desired mood and realism in your 3D scenes. In the next section, we'll delve into how to enable and customize shadows, which are essential for adding depth and grounding your objects.