Showroom · Make-of

How Veranda was made

A luxury listing page where the floor plan — not the photography — is the centrepiece: a cutaway 3D model, staged room by room like a real listing, that you can walk with a mouse, a finger, or the Tab key. Tap any room and the camera steps inside it — or let the guided tour walk the whole plan at eye height.

What it demonstrates

That a listing page can prove its own numbers. The whole house lives in one hardcoded room schedule — fourteen rooms, each a rectangle with a name and its door openings. The spec strip counts bedrooms, baths and floor area from that schedule; the 3D model is extruded from it; the 2D fallback plan is drawn from it. If the model shows four bedrooms, the strip says four, necessarily. The page cannot disagree with itself.

Everything is framed honestly: the property, the neighborhood and the brokerage are fictional and say so; the photographs are labeled representative; the enquiry form is labeled a demo and submits nowhere.

Techniques, honestly named

• Cutaway massing model — each room is a floor plate plus low extruded walls (three.js r160, pinned via import map). Door openings are subtracted from wall runs as intervals, so rooms genuinely connect the way the copy says they do. An orthographic camera gives the museum-model look; one shadow-mapped key light and a radial-gradient contact shadow ground it.
• Tap a room, step inside it — invisible per-room hit volumes are raycast on every pointer move; hover previews a room and a label chip with its name and dimensions anchors itself to it in screen space. A tap or click then flies the camera down into that room, to a composed eye-height view — every one of the fourteen rooms has its own. A “Back to plan” chip (or Escape, a tap, a drag) climbs back out to the unchanged orbit view; under prefers-reduced-motion the flight becomes an instant cut. A pill hint teaches the interaction in the first two seconds. The same handlers drive a list of fourteen real buttons, which preview on focus — the whole plan is keyboard-walkable with Tab, and a live region reads out name, dimensions and area.
• Staged like a listing — all fourteen rooms are furnished procedurally in the page’s own bronze, cream and ink: dressed beds with pillows and throws, sofas on bordered rugs, lamps with warm glowing shades, a dining table for six, the kitchen island with its stools, stone tubs and double vanities, wardrobes, plants and framed art — plus loungers and a dining set out on the deck. Every piece is a box, cylinder or sphere pushed into a per-material bucket and merged into one mesh per material, so the entire staging renders in about sixteen draw calls.
• A guided walkthrough at eye height — one button swaps the orthographic model camera for a perspective one, flies it down through the front door and glides it along a Catmull-Rom spline threaded through the actual door openings: seven stops from the entry hall to the veranda deck, each easing into a pause while the room highlights and its name and dimensions fade in. Escape, a drag or a tap exits back to the orbit view; arrow keys step between stops; progress dots show where you are. Under prefers-reduced-motion the same stops become crossfaded still frames. Picking a room mid-tour hands the camera straight over to that room’s step-inside view — the two systems share one perspective camera and never fight.
• Slow auto-orbit that hands over to drag-orbit, pauses when the tab hides, and never runs under prefers-reduced-motion (the scene then renders on demand).
• Honest degradation — WebGL context loss is absorbed (prevent default, resume on restore); with no WebGL at all, a numbered 2D SVG plan is built from the same schedule and the room buttons highlight it instead.
• Native dialog lightbox for the gallery — arrow keys, backdrop close, focus returned to the opening thumbnail.

Recreate it