Sun and moon for Three.js & React Three Fiber

The sun and the moon are the key light of an outdoor scene. The sun is the one light that casts the outdoor shadows, and when it sets the moon takes over, so a scene is never lit by two suns at once and always has a single, consistent set of shadows. Both are also drawn in the sky, so what you see and what lights the scene always agree.

The sun

The sun's direction comes from the sky settings or, when it is running, the time of day clock. Its colour is not picked from a palette: it is the colour of sunlight after passing through clear air, white when the sun is high, warmer through the afternoon, deep orange and dim on the horizon. The same sun lights the volumetric clouds, the ocean and the terrain, so the glow on a cloud, the glitter on the water and the shadows across a valley all line up.

The moon

The moon is a disc in the sky shaded as a sphere lit by the real sun, so its phase is not a picture: whether it shows as a crescent, a quarter, gibbous or full, and which side is lit, comes from where it stands relative to the sun. By day it is pale; at night it is bright with a soft halo. Through twilight, as the sun drops below the horizon, moonlight fades in as the scene's light, cooler and weaker than sunlight with softer shadows, and stronger the fuller the moon. With the clock off the moon is full and stands opposite the sun, so lowering the sun below the horizon raises the moon on the other side. Terrain and objects pass in front of it naturally.

Settings

• Intensity: the strength of the sunlight.
• Moon Intensity: the strength of the moonlight.
• Moon Size: how large the moon appears in the sky.
• Sun Size: the size of the sun in the skybox backdrop.
• Cast Shadow: whether the sun and moon cast shadows.

The section's own switch swaps the calculated sky for a skybox backdrop; the light, its colour and its shadows work the same either way. The moon's phase is set with the moon phase slider in the time of day controls.

When to use it

Use it in every outdoor scene: it is the main light. Bring the sun low for long, warm shadows across a product, take it below the horizon for a moonlit scene, or let the clock carry it across the sky. For studio and interior lighting, an HDR environment and placed lights are usually the better choice, and the two can be combined.