A 3D real estate website uses a live, real-time model of the building as the main way to explore and buy. Instead of a gallery of renders and a separate price table, the buyer rotates the building, hovers a window to see that exact home's rooms, size, price and status, and filters until only the matching homes light up. For off-plan projects it is the closest thing to standing outside the finished building at dusk.
It is also the most demanding option.
Why the building is the best sales tool
A buyer's first questions are spatial: which side faces the sun, what the courtyard looks onto. A flat list cannot answer those; a model answers them for every home at once.
Three interactions do most of the work:
- Window as home. Each window or balcony is linked to one unit. Hover or tap shows rooms, area, outdoor space, price and status.
- Light up available homes. One toggle dims everything sold or reserved and lights what is left. It doubles as a scarcity signal without any copywriting.
- Day to dusk. The same building in morning light shows orientation and views; at dusk it becomes the emotional hero shot.
Our Tallinn example, as an illustration
To test these ideas, we built an example residential project in Tallinn: a brick industrial-heritage building rendered in real-time 3D at dusk. What it includes:
| Feature | What it does |
|---|---|
| Every window is a home | Hover tooltip with rooms, area, outdoor space, price and status |
| "Light up available homes" | Toggle that lights only unsold homes |
| Facade elevation picker | Choose a side of the building; a filterable table below follows |
| Neighbourhood in walking minutes | Everyday places shown as walking minutes, not adjectives |
| 5-stage construction timeline | From permit to handover, so buyers see where the project is |
| Sales contact form | Rooms and price slider, with the selected home pre-filled |
| Low-end phone fallback | A pre-rendered loop video replaces the live model |
It is an example project, not a launched development, so there are no results to report. It shows how the pieces of an interactive apartment selector change when the selector is a live 3D scene instead of a static render.
What a 3D real estate visualization needs
The model
Start from the architect's CAD or BIM model, then rebuild it for the web. A construction model is far too heavy; you keep the facade, windows, balconies and a simplified site, and bake detail into textures. The deliverable is usually glTF, the standard web 3D format, compressed with Draco for geometry and KTX2/Basis for textures.
Each window or balcony is a named mesh whose name is the unit ID. That single convention is what makes window-as-home possible.
The data
The model never stores prices. At runtime, the site loads the unit table (from a CRM, a headless CMS or a shared sheet), matches unit IDs to meshes and colours them by status. When sales reserves a home, the building changes on the next load.
The light
Day-to-dusk can be faked with two baked lighting sets and a blend, or done with real-time lighting. Baked is lighter and more predictable on phones; real-time is more flexible for sun studies. We usually bake.
Keeping an interactive 3D building fast
3D has a cost, and phones pay it. Utsubo notes that Three.js core is around 600 KB minified before any scene code, and adding helpers, post-processing and a model can push you past 3 MB. Google's "good" LCP is 2.5 s or less (web.dev).
What we do:
- HTML first. Headline, prices, availability and the unit list render as normal HTML before the 3D boots. Utsubo's advice is to "ship the page as HTML, hydrate the canvas after."
- A poster frame. A still of the building at dusk is the first paint and the LCP element.
- Lazy-load the scene after first paint, and only when the hero is in view.
- Device check, then fallback. Low-end phones get a pre-rendered loop video and a 2D facade selector with the same data. Nobody gets a blank canvas.
- Budget the scene. Set limits for model size, texture memory and draw calls, and test on a mid-range Android phone, not a studio laptop.
Our full checklist lives in 3D website performance.
When a 3D real estate website is worth it
| Situation | Our view |
|---|---|
| Off-plan, 40+ homes, strong architecture | Yes, the model is reused across web, sales gallery and film |
| Heritage or landmark building | Yes, the building is the story |
| Under 15 homes, simple block | Probably not; a good render selector is enough |
| No reliable price list or status process | Fix that first; 3D on stale data is worse than no 3D |
Whatever you pick, the 3D layer sits on top of a complete real estate development website: plans, location, progress and contact still need to work without it.
