PointLight vs DirectionalLight in Three.js

In Three.js, understanding how different light sources emit rays is crucial for creating realistic 3D scenes. This article explains the fundamental differences between PointLight and DirectionalLight, focusing on how they project light rays, how distance affects their intensity, and how their positioning impacts your scene.

PointLight: Omnidirectional Emission

A PointLight mimics a local light source, such as a lightbulb, a candle, or a torch. It exists at a specific coordinate in 3D space and emits light rays in all directions (360 degrees) starting from that central point.

Key characteristics of a PointLight include: * Diverging Rays: The light rays spread outwards spherically from the source. Because the rays diverge, shadows cast by a PointLight will become larger and more dispersed the further the shadowed object is from the light. * Distance Decay (Attenuation): The intensity of a PointLight decreases as distance from the source increases. In Three.js, you can control this falloff using the distance and decay properties of the light. * Position Matters: The physical coordinates of the light source directly dictate which objects are illuminated and the angle at which the rays strike their surfaces.

DirectionalLight: Parallel Rays

A DirectionalLight mimics an infinitely distant light source, with the sun being the most common real-world analogy. Instead of emitting light from a single point, it projects parallel light rays across the entire scene in a specific direction.

Key characteristics of a DirectionalLight include: * Parallel Rays: Because the light source is mathematically treated as being infinitely far away, all emitted rays travel parallel to each other. Consequently, the shadows cast by a DirectionalLight do not diverge; they remain consistent in scale regardless of the distance from the source. * No Distance Decay: The intensity of a DirectionalLight does not diminish over distance. An object placed close to the coordinate of the light source will receive the exact same light intensity as an object placed far away along the same path. * Direction Over Position: The direction of the light is calculated from the light’s position pointing toward its target (which defaults to the origin 0, 0, 0). Moving the light closer or further along its directional vector does not change the illumination; only changing the angle relative to the target alters how the light hits your objects.