Configuring and Positioning Lights

In the world of 3D, light is what allows us to perceive form, texture, and atmosphere. Without it, our scenes would be flat and lifeless. Three.js provides a variety of light types, each with its own characteristics and uses. In this section, we'll explore how to configure and position these lights to sculpt your 3D environments.

The most fundamental lights in Three.js are ambient and directional lights. Ambient light provides a soft, uniform illumination across the entire scene, preventing areas from being completely black. Directional lights simulate light coming from a distant source, like the sun, with parallel rays affecting all objects equally regardless of their position.

This code snippet creates an ambient light with a white color (0xffffff) and an intensity of 0.5. It's then added to the scene. Remember that ambient light is quite basic and doesn't cast shadows or create distinct highlights. It's primarily for setting a general base illumination.

Here, we've created a directional light, also white, with an intensity of 1. Crucially, we've used position.set(5, 5, 5) to define the direction from which the light emanates. In Three.js, a directional light's position determines its direction, not its location. The light will shine from this point towards the origin (0,0,0).

Beyond ambient and directional lights, we have point lights and spotlights. Point lights emit light in all directions from a single point, much like a bare light bulb. They're excellent for simulating localized light sources like lamps or candles. Spotlights, on the other hand, emit light in a cone shape, allowing for more focused illumination, similar to a stage spotlight.

This point light is red (0xff0000), has an intensity of 1, and a distance of 10. The distance property controls how far the light's effect extends. The position.set(-5, 0, 0) now accurately reflects where this light source is located in the 3D space.

The spotlight is green (0x00ff00) with an intensity of 1. The additional parameters define its behavior: the second 0 is the distance (0 means infinite distance), Math.PI / 4 is the angle of the cone, 0.1 is the penumbra (how soft the edge of the cone is), and 2 is the decay rate (how intensity decreases with distance). The position.set(0, 5, 0) places the spotlight above the scene.

Positioning lights is as crucial as choosing their type. You can use the position.set(x, y, z) method for all light types, though its interpretation differs slightly. For point lights and spotlights, it defines their physical location. For directional lights, it defines the direction from which the light originates. Experiment with different positions and combinations to achieve the desired mood and visual impact in your scene.

graph TD;
    A[Scene] --> B(Ambient Light);
    A --> C(Directional Light);
    A --> D(Point Light);
    A --> E(Spot Light);
    C --> F{Direction of Light};
    D --> G{Position of Light};
    E --> H{Position of Light};
    E --> I{Cone Angle};
    E --> J{Penumbra};
    E --> K{Decay};