threejs-sky: From an ant's eye view to orbital mechanics.
A layered atmosphere, Gaussian clouds, a sun and moon on real orbits, stars and the Milky Way turning with sidereal time. The lighting, fog and exposure that go with them come from the same Sky.create() or one <Sky />.
One sky, one update.
Give it your renderer, scene and camera, a date and a place on the planet. Call update() once per frame and it moves the sun, moon and stars, lights the scene and sets fog and exposure. Every setting is plain JSON and live.
import { Sky } from 'threejs-sky'
const sky = await Sky.create({
renderer, scene, camera, // WebGPURenderer
clock: { date: '2026-08-12T19:00:00Z', dayLength: 600 },
observer: { latitude: 47, longitude: 8 },
shootingStars: { shower: 80 }, // the Perseids, roughly
lighting: { fogDensity: 0.0008, autoExposure: true },
})
sky.follow(controls.target)
renderer.setAnimationLoop(() => {
sky.update()
renderer.render(scene, camera)
})import { Html } from '@react-three/drei'
import { Sky, useSkyTime } from 'threejs-sky/react'
function Clock() {
const t = useSkyTime() // re-renders 4×/s
return <Html>{t.date.toUTCString()}
<button onClick={() => t.setTimeOfDay(19)}>dusk</button>
</Html>
}
<Sky
clock={{ dayLength: 300 }}
observer={{ latitude: 52 }}
clouds={{ coverage: 0.5 }}
shootingStars={{ shower: 60 }}
>
<Clock />
</Sky>Everything above the horizon.
Physics where it shows, cheap tricks where it doesn't. Everything is a deterministic function of seed and time, and every feature below is live in the demo.
A physically based atmosphere
Rayleigh, Mie and ozone, per pixel.
The dome ray-marches the same scattering model the CPU uses for light colours, fog and exposure, so the sky and the scene always agree. Turn up mie for a hazy day, or switch the atmosphere off for an airless world with stars by day.
Sunrise and sunset
Lighting that follows the sun down.
Sun and moon lights take their colour from the atmosphere's transmittance. Image-based lighting is re-rendered from the sky a few cube faces per frame, fog takes the horizon colour, and sky.exposure keeps noon and midnight readable. sky.uniforms.night is there for lit windows and street lamps.
Gaussian clouds
Thousands of splats, one draw call.
Cumulus clusters with flat bases, stratus sheets and cirrus streaks, placed by a seeded weather field and drifting with clouds.wind. Each splat integrates its Gaussian along the view ray. sky.cloudCover(x, y, z) returns the same field, so rain can fall where the clouds are.
- cumulus
- stratus
- cirrus
Moon phases from geometry
No phase slider.
The moon is on a Keplerian orbit, and its phase comes from the sun-moon-observer angle. Phases match the real Moon to within about a day, moonlight scales with them, and eclipses happen when the moon passes in front of the sun.
Stars and the Milky Way
Turning with sidereal time.
A seeded star field with black-body colours and twinkling, plus a procedural Milky Way with a bulge and dust lanes. A brighter sky lowers the magnitude limit, so stars come out one by one at dusk and thin out under a full moon. One draw call, no geometry per star.
Shooting stars
Sporadic meteors and showers.
A steady rate of sporadic meteors plus a shower from a radiant: tens per hour for the Perseids, thousands for a storm. They only show at night and all render in a single draw.
Up to the edge of space
Troposphere to exosphere.
Real atmosphere layers, with the Kármán line as the edge of space. Above it the sky goes black, stars reach full brightness and fog switches off. Labelled shells mark each layer and the moon's apogee, and sky.clipPlanes() keeps everything in view from an ant on the ground to past the moon.
altitude shells
from orbitNight side and city lights
The planet glows after dark.
Seen from altitude, the night side glows with city lights from your own (lat, lon) => 0..1 field or a seeded one. They switch on with the local sun angle and are dimmed by the clouds in front of them. A thin airglow shell shows as a green line on the limb.
A Keplerian solar system
Seasons and sunrise times from real orbits.
The sun, home planet and moon run on two-body orbits from classical elements, with five seeded planets around them: rocky and desert worlds inside, gas giants further out and ice giants beyond, some of them ringed. SolarSystem draws it all with a floating origin and orbit lines, and marks periapsis and apoapsis.
Made for React too
A declarative <Sky> component.
Every setting is a prop. <Stars>, <ShootingStars> and <SolarSystem> work on their own or inside <Sky>, and useSkyTime() gives you the clock with setters.
Look up.
Scrub the clock, fly up past the moon and back down in the live demo, or go straight to the API reference.