Three.js HemisphereLight Guide for Outdoor Scenes

This article explains the fundamentals of the HemisphereLight in Three.js, detailing how it simulates natural sky and ground ambient lighting. You will learn its core parameters, how it differs from other light sources, and best practices for implementing it to create realistic, high-performance outdoor 3D environments.

What is a HemisphereLight?

In Three.js, a HemisphereLight is a light source positioned directly above the scene, designed to simulate outdoor ambient light. Unlike a standard AmbientLight which colors the entire scene uniformly, a HemisphereLight uses two distinct colors: * Sky Color: The color radiating from directly above (representing the sky). * Ground Color: The color radiating from directly below (representing the ground or floor reflection).

Three.js automatically interpolates between these two colors based on the orientation of the 3D model’s surfaces. Surfaces facing upward receive the sky color, while surfaces facing downward receive the ground color.

// Basic HemisphereLight implementation
const skyColor = 0xb1e1ff;    // Light blue
const groundColor = 0xb97a20; // Brownish orange
const intensity = 1;
const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
scene.add(light);

Like AmbientLight, a HemisphereLight cannot cast shadows, making it computationally highly efficient.

Best Uses for Outdoor Environments

A HemisphereLight is most effective when used as the foundational ambient light source for outdoor scenes. Here is when and why it should be used:

1. Simulating Realistic Sky Dome Reflection

Real-world outdoor environments are never lit by a single point of light. Even in the shade, objects are illuminated by light bouncing off the blue sky and the earthy ground. By setting the sky color to a soft blue and the ground color to a muted green, brown, or gray, you instantly mimic this natural hemisphere of light, making outdoor models look grounded rather than floating in artificial darkness.

2. Filling Shadows (Secondary Light Source)

For realistic outdoor scenes, a HemisphereLight should be paired with a DirectionalLight (which acts as the sun). While the DirectionalLight casts sharp, direct shadows, the HemisphereLight acts as a fill light. This ensures that the shadowed areas of your models are not pitch black, but instead are softly illuminated with a natural, cool sky tone, mimicking real-world atmospheric scattering.

3. Maximizing Performance

Calculating global illumination (light bouncing off surfaces) is extremely expensive in real-time WebGL. A HemisphereLight provides a highly convincing approximation of bounced global illumination at almost zero performance cost. This makes it ideal for mobile devices, VR environments, and large-scale open-world web applications.