Diorama: a 3D room built from primitives, not model files

We just published a new Lab piece — Diorama, an isometric cutaway room you can rearrange, recolour and re-skin right in the browser. It looks like a design render. It isn't. There is not a single model file or texture image behind it. Every object is built from code, and here is why we did it that way.

No asset pipeline, on purpose

The usual way to put furniture in a 3D scene is to model it (or buy it), export .glb files, load them at runtime, and manage a texture set. That is a pipeline: files to host, licences to track, load time to eat, and a hard coupling between the art and the code. For a small, self-contained experiment we wanted none of it.

So every piece — the sofa, the shelving unit, the desk, the plant — is a THREE.Group assembled from rounded-box primitives (RoundedBoxGeometry) plus a few cylinders and icosahedrons. A sofa is a base, two arms, a backrest, cushions and four legs. A shelf is a back panel, side frames, horizontal boards and a handful of decorative solids. It is Lego, in code. The whole catalogue is a few hundred lines, and it loads instantly because there is nothing to download.

Making primitives look expensive

Low-poly boxes can look cheap, or they can look like a studio render. The difference is almost entirely lighting and composition.

• Orthographic camera at an isometric angle. That flat dollhouse cutaway comes from an ortho projection, not perspective. Two walls form an L; the open corner faces the viewer. We clamp the orbit so the cutaway always reads.
• One warm key light with soft shadows. A single directional light with a 2K PCF-soft shadow map does most of the work, plus a cool hemisphere fill so the shadows are not dead black.
• Rounded edges everywhere. RoundedBoxGeometry instead of a hard BoxGeometry catches light on every bevel. It is the single biggest jump from "programmer art" to "designed".
• A restrained post chain. Bloom on the glowing screens and lamp, an outline pass for selection, ACES tone mapping. Nothing heavy.

Textures drawn at runtime

The one thing you cannot make from geometry is a wood floor or a patterned rug. We did not ship images for those either — they are painted to a <canvas> when the page loads (planks with grain, a checked rug) and used as a CanvasTexture. Change the floor tone and we simply redraw the canvas. No files, and because every material is generated, recolouring anything is a one-line colour set.

The interactive part comes for free

Because the furniture is code carrying metadata, the editing features almost fall out on their own. Each piece knows its footprint and which materials are paintable. Dragging raycasts onto the floor plane and snaps to a grid. Recolouring writes to the piece's own material instances — cloned per placement, so nothing bleeds between copies. Themes set the walls, floor, rug and sofa in a single call. The layout persists to localStorage, and the part we like most: the entire room encodes into a shareable link. That trick deserves its own post.

Try it

Go and move some furniture: the live Diorama. It is open source — the whole thing is on GitHub, no build step, Three.js straight from a CDN. Open catalog.js and you will find the entire furniture set in one place.