Skip to content
UI Aesthetics

Three.js Landscape

Tool coverage — filled cells are supported. Full names under “Works with” below.

A live landscape that stays quiet behind the subject — polar-grid terrain, slope-and-moisture coloring, GPU grass, and a time-of-day system that cross-fades instead of cutting.

The thesis is stated in the first line: a backdrop has one job — make the subject look like it is somewhere. Everything after is chosen so the landscape reads at a glance and then gets out of the way, which is exactly the discipline most Three.js hero scenes lack.

The craft is real and specific. Terrain samples on a polar grid centred under the camera instead of a square heightfield, with ring spacing following pow(t, 2.4) so every ring covers roughly the same number of screen pixels — two thousand triangles near the subject beating two hundred thousand spread evenly. Plain fBm “reads as crumpled paper,” so the sample position is domain-warped with a second noise field before the octaves are layered, which is the single biggest step toward terrain that looks eroded rather than crumpled. Ground color comes from slope and moisture, not textures; grass is instanced with wind computed on the GPU; the sky is a gradient dome with a star field you can actually see.

It even warns you about the classic polar-grid failure — winding every quad backwards and looking at the sky through the ground — and tells you to orbit under the horizon once, deliberately, before building anything on top.

Install: copy agent-skills/web-design/threejs-landscape/ from the repo into your .claude/skills/ directory. Requires Three.js in the target project.

Gotcha: it’s one of a trio — the author’s threejs-weather (rain/storm/snow on top) and threejs-towers (architectural subjects) extend it, and the skill references both. It stands alone fine; just know the pointers lead outside this folder.

File & content map

SKILL.md

Three.js Landscape

A live landscape that stays quiet behind the subject — polar-grid terrain, slope-and-moisture coloring, GPU grass, and a time-of-day system that cross-fades instead of cutting.

Contents — 9 sections

Ring the camera with a polar grid
Warp the domain before you layer octaves
Colour by what the ground is doing, not by a texture
Grass: one ribbon, shaped entirely in the vertex shader
Stones from the same height function
Sky: six stops on an 8×512 canvas
Stars: confine them to the band the camera can reach
Time of day is interpolation, not a switch
What to check before you call it done

Package — 2 folders

agents/
content section file folder