Build guide · Site 20 of 25

A whole island in an orthographic box.

ISOMETRIA is one of 25 sites built by Formwork. The hero is a real 3D island you can spin, lit by a single sun and flippable to night — built from a hundred little cubes.

The idea

A cosy-games studio should greet you with a cosy world. Instead of a render or a video, the island is generated live: a height function raises cubes out of the sea, colours them by altitude, and dots them with trees and a lighthouse.

The stack

• 3D three.js (r160) via an import-map — no bundler.
• Camera an orthographic camera for true isometric depth (no perspective).
• Light one shadow-casting sun + ambient, with soft (PCFSoft) shadows.
• Type Fredoka (rounded display) + Nunito (body).
• Host static files on GitHub Pages.

Signature technique: a generated island

A radial falloff makes the land a dome that sinks into water at the edges; a little sine noise adds variety; rounding the result gives the blocky, stepped look:

const r = distanceFromCentre(i, j);           // 0 at middle → 1 at edge
let h = (1 - r) * 4.2 + sin(i*0.9) + cos(j*0.75);
level = max(0, round(h));                      // integer terraces
color = [water, sand, grass, grass, rock, snow][level];

Each cube is scaled on Y to its height and dropped on the grid. A raycaster lifts whichever tile is under your cursor; a drag rotates the whole group; the day/night button just dims the sun and swaps its colour to moonlight.

Details that matter

• Orthographic = isometric — parallel lines stay parallel, so far cubes are the same size as near ones.
• Context safety — we grab the WebGL context ourselves and hand it to three, so it never probes a conflicting type.
• Performance — devicePixelRatio capped at 1.5; a single 1024² shadow map.
• Reduced motion / no WebGL — the world renders one still frame, and the glass hero card stands alone.

Ship it on GitHub Pages

git init -b main && git add -A && git commit -m "ship"
gh repo create formwork-isometria --public --source=. --push
gh api --method POST /repos/OWNER/formwork-isometria/pages \
  -f 'source[branch]=main' -f 'source[path]=/'

A height function, a hundred cubes and one sun — a little world you can hold in a browser tab.