2026 · Three.js · WebGL · Postprocessing · Procedural

Diorama — a room you can rearrange

An isometric cutaway room, rendered in real time. Drag furniture across a snap grid, recolour every piece, re-skin the walls and floor, and swap whole moods with one click. Fully procedural — no models, no textures, no build step.

Open live demo View on GitHub
— LIVE DEMO
Fullscreen ↗

Diorama is an isometric cutaway room you furnish yourself. It opens on a dark studio — sofa, shelving, a desk lit by its own monitor — and every object is yours to move, recolour and re-skin in real time.

Drag any piece and it slides across a snap grid. Select it and a palette appears: make the sofa terracotta, the shelves walnut. Re-skin the walls with flat paint or a wood-slat treatment, swap the floor between four tones, change the rug, flick the lamps. Or skip the fiddling and hit a theme — Studio, Warm, Cool — to re-dress the whole room at once. Your layout is saved in the browser, so it's waiting when you come back.

It's all procedural. There are no model files and no texture images on disk — every sofa, shelf and plant is built from rounded-box primitives in code, and the floor planks and rug pattern are drawn to a canvas at runtime. The look comes from an orthographic camera held at an isometric angle, a warm key light casting soft shadows, and a post-processing chain that blooms the glowing screens and draws an orange outline around whatever you've selected.

Three.js, straight from a CDN. No build step. Open it fullscreen or read the source.