Complete Sky System for Three.js (Skybox, Sun/Moon, Day/Night Cycle, Clouds, Stars & Lensflares)

Resources
, , , ,
1

This is meant to accelerate your game development by skipping a lot of boilerplate.

Hey everyone!

I wanted to share a package that aims to accelerate game development by taking care of the foundational sky and lighting features that most game 3D worlds need, without requiring you to reinvent the wheel.

Check out the Live Demo on CodePen →

The goal is simple:

Reduce the effort you spend upfront on basic environment systems so you can focus entirely on gameplay.

Instead of spending days wiring together sky colors, sun motion, light updates, clouds, stars, and shaders, you can drop this in and immediately get a complete atmosphere that just works.

Features

Dynamic day–night cycle

  • Real sun and moon positioning throughout the day

  • Smooth transitions: sunrise → midday → sunset → night

  • Adjustable azimuth, elevation, intensity, and color

  • Works with any FOV (60–120+) without lensflare parallax issues

  • Atmospheric falloff and gradients

  • Configurable sky/ground color blending

Physically-inspired night sky

  • High-density starfield with separate, individual star flickering

  • Color-corrected horizon glow

  • Moonlight intensity scaling

  • Time-driven transitions with no popping or harsh cuts

Performance-friendly Clouds

  • Procedural scrolling cloud layers

  • Color tinted automatically based on sun angle

  • Adjustable density, height, scale, and speed

  • Zero overdraw flicker

Lensflare system (infinite-distance flare, no parallax)

  • Enhanced version of the classic three.js Lensflare

  • Custom screen-space override to eliminate parallax

  • Works reliably at ultra-wide resolutions

  • Fully color-corrected textures included

  • Optional bloom-friendly mode

Skybox

  • Physically blended top/bottom sky colors

  • Configurable sun size for stylized or realistic look

  • Night-day shader is all in linear space (correct for PBR)

Lighting & Shadows

  • Auto-updated DirectionalLight synced with sun

  • Optional ambient fill light

  • Smooth intensity ramping based on time-of-day

  • Correct shadow camera handling

Dev-friendly design

  • Fully modular classes you can drop into any project

  • Designed to scale to large open worlds.

Why I built this

Every game needs a sky, sun, stars, a day-night cycle, and basic lighting.

Developers often spend weeks building a sky system from scratch, only to end up with something that still has:

  • wrong colors

  • incorrect gamma

  • popping transitions

  • broken lensflare parallax

  • misaligned sun/mouse input

  • mismatched shadows

I wanted to provide something that skips all that boilerplate and gives you a system that “feels shippable” right out of the box.

Live Demo on CodePen →

There is room for performance improvement such as object pooling, throttling updates, etc., but those are pretty trivial given the existing code structure, so I decided to wrap up as-is.

I hope you enjoy the demo. You can play with the time controls, timescale, and toggle helpers on/off as needed. Would love to hear what people think.
If this saves anyone time in their own projects, then it has done its job.

5 Likes
2

This is an excellent tool for beginning programmers. And it all fits in a single CodePen example.
On my laptop, the sun and moon seem to increase dramatically in size as they approach the edges of the screen. I assume that can be easily adjusted.

1 Like
3

I see you chose a curved sky box, I haven’t seen many examples with that but I am a fan!

Very nice work!

1 Like
4

@paulbrzeski Thanks, glad you like it! It’s actually a standard cube skybox, but the shader blends the sky colors based on vertical direction which gives it that smooth curved feel. The clouds help sell that dome effect too.

2 Likes
5

@phil_crowther Thank you, glad you see value in this! That’s perspective distortion from the 90° FOV; wide angle lenses stretch objects at screen edges. This is a one-line change in code, but I’m going to leave it as-is, at 90, as I think for the purpose of this demo, it’s important to capture more breadth of the scene in a single view.

1 Like
6

impressive, this is a very good start to build open world games, having a day and night cycle makes the gameplay more lively.

1 Like
7

Welcome to the madness :3. Very fun first iteration, excellent job! Have you considered looking through the shader examples for Preetham? It might be a good next step if you want to avoid the sharp transitions between morning/mid day and is already implemented in the custom shader, here: three.js webgl - shaders - sky sun shader

1 Like
8

@DanteXD Thanks for the suggestion! I went with a simpler manual color lerping approach rather than Preetham’s physically-based atmospheric scattering. Preetham seems quite a bit heavier on the GPU, and one of my goals was to keep things as light as possible while also looking good enough. I know this is a very subjective line. Maybe I was too scroogey with the resources :slight_smile:

9

@red-reddington Preetham is likely pretty lightweight though I admittedly don’t target lower end devices so, I must admit a lack of experience in that area.

1 Like