Interior Architecture Studio — 3D Room Configurator

A visitor arrives on an editorial landing page and is pushed toward a single primary action: design your space. In the Studio they set real room dimensions in millimetres, choose from a 25-item catalogue, and place modules that behave like joinery — snapping flush to walls, latching to neighbours, refusing to overlap.

They can change any of 29 finishes per object, read live dimensions in plan, orbit the room in 3D, and enter a first-person walkthrough that collides properly with the furniture. Work saves and reopens on return, every edit can be undone, and the finished design converts into a priced enquiry.

A deliberately narrow material palette — paper, stone, ink and a single warm brass accent — with gradients, glass and glow explicitly prohibited in the stylesheet. Cormorant Garamond set light and large against Inter for interface text. An 11px uppercase label at 0.16em tracking carries every eyebrow, button and caption, and all measurements are set in tabular figures so digits align in columns.

The result reads as an architecture practice rather than a software product. The 3D is dressed in the language of architectural drawing — brass dimension lines, small-caps labels, tabular figures — and presented as the studio’s medium rather than as a technology demonstration. That restraint is the whole point.

Furniture rotates to arbitrary angles, so axis-aligned boxes produce false overlaps and units that visually fit get rejected. Every module’s footprint is instead an oriented bounding box, and overlap is tested with the separating-axis theorem at a tolerance that lets snapped units touch without registering as a collision. Walkthrough collisions depenetrate along the axis of least penetration in each module’s local frame.

Mixing millimetres — the domain unit — with metres, which Three.js expects, is the classic source of silent 1000× bugs. The type module documents the contract explicitly: every persisted length is millimetres, every angle degrees, and conversion happens exactly once, at the render boundary. If you are converting in two places, one of them is a bug.

Every one of the 29 finishes is drawn to a canvas at runtime from a PRNG seeded on the material id, so a finish looks identical on every reload and the application ships zero texture or model files. Textures are shared by material and quantised tiling rather than cloned per mesh, bringing a full demo kitchen to roughly 305 draw calls, 9,800 triangles and 11 textures. Shadow maps update on demand rather than per frame, since a directional light’s shadow does not change when the camera orbits.

Routing 60fps pointer movement through React would re-render the whole scene, so a live drag writes through a module-level session object outside React entirely, and the drag controller listens on the canvas element rather than per-mesh so a fast drag that outruns the cursor keeps tracking. Storage sits behind a repository interface: swapping localStorage for a server implementation requires implementing the interface and changing nothing else.

A 25-step Playwright journey with 24 assertions drives the real production bundle in CI, covering placement, snapping distances, worktop generation, camera movement in walkthrough, save, reload, restore and quote submission. The project’s own handoff notes document eight bugs that passed both typechecking and code review and were caught only by driving a real browser.

A two-step responsive design, mobile to large, with the large breakpoint carrying most of the layout logic. The walkthrough has purpose-built touch controls — a virtual movement stick and a look pad. Below the extra-large breakpoint the Studio’s side panels overlay the canvas rather than sitting in flow, a deliberate trade documented in the project’s handoff notes.