PoC · Framework 22 · 3D weather

Today's sky, in three dimensions.

A tiny world, made of free threejsassets.com models, that builds a sky the moment you name a city. Pick a condition, drop a place, watch the dome catch the light.

Building the sky
Loading models…
Now · live
Hong Kong
Sunny · 28°C · Light breeze
Loading live weather…
Drag rotate Scroll zoom
Live data from open-meteo.com. Polls every 5 minutes — or hit refresh for an instant check.
Three.js · GLTFLoader

A sky built from free parts.

Every model on the stage comes from threejsassets.com's free tier. The page wires them together with the standard three.js GLTFLoader, sets Draco decoding, and lets you fly through the scene with mouse and scroll.

Drop in a city, the page picks a condition by latitude and time of year, and the sky reshapes itself. The clouds are real instances of the threejsassets Cloud Puff model, randomly placed and slowly drifting.

01

Load

GLTFLoader fetches each .glb. Draco decoder is configured once, so even the compressed files unpack in milliseconds.

02

Place

Sky dome sits as a background hemisphere. Clouds get a slow drift loop. Sun gets a directional light + a small glowing sphere. Rain is a particle field that follows the cloud direction.

03

Switch

Four weather modes crossfade in 600ms — sky color, light intensity, cloud count, and rain density all transition together.

Credits & licenses.

Every 3D model on this page is from threejsassets.com, marked Free, and used under the Free Commercial License. The page itself is single-file, no build step, no tracking.

Cloud Puff 01

A soft cumulus puff: five jittered lobes flattened underneath. 400 tris, Draco-compressed. Used as the basic cloud instance for partly-cloudy and overcast modes.

threejsassets
Free
6 KB

Cloud Set

A complete cloud cluster: larger mass with multiple puffs at varying scales. Used in overcast and rainy modes for the heavier cloud cover.

threejsassets
Free
9 KB

Sky Day Dome 01

A gradient sky hemisphere, light blue at zenith to warm cream at the horizon. The base sky for the sunny and partly-cloudy modes.

threejsassets
Free
6 KB

Sky Day Dome 02

A second sky variant with a slightly cooler blue and a thicker horizon band. Crossfades in for overcast conditions.

threejsassets
Free
6 KB

Day Sky Dome

The original full dome: blue zenith, warm horizon, slight gradient. A 2.1k-triangle variant reserved for the rainy-mode atmosphere.

threejsassets
Free
14 KB

Apple Tree

A small low-poly apple tree with green canopy and brown trunk. Anchors the scene with a piece of ground that doesn't move.

threejsassets
Free
7 KB

three.js · GLTFLoader · Draco

The renderer, the asset loader, and the mesh-compression decoder that lets each tiny .glb unpack. Loaded from unpkg.

three.js
MIT

Free Commercial License

The license that covers every model above. Free for use in commercial and personal projects, including the projects you ship. No redistribution of the source files; no resale of unmodified assets.

license
Commercial