3D House Design in the Browser with react-konva and Three.js
homeStructure is a browser-based house design studio for a real, irregular plot in Attock. You draw the floor plan in 2D on the exact boundary, watch it build in live 3D, and get passive-design advice for a hot, semi-arid climate.
By Wasif Rehman · · 3D & web graphics
In short
- Drive every view from one validated document so the 2D plan and the 3D model never drift apart.
- Constraining an editor to an irregular boundary is mostly a geometry problem, so build containment and snapping early.
- Add time-travel undo and redo to the state store, because a design tool is used for constant experiments.
- Save plans as plain JSON so designs are portable and shareable.
- Turn passive-design intuition into a live score that changes as you edit.
House design software for a real, irregular plot
Most house-design tools assume a clean rectangular lot. Real plots aren't like that.
homeStructure is a personal project I built to design a climate-smart house on a real, irregular trapezoid plot in Attock, Pakistan:
- About 2,455 sq ft, roughly 9 Marla
- Traced from satellite imagery
- Three of its four sides are shared party walls
You draw the floor plan on the exact boundary, watch it build in live 3D, and get passive-design advice tuned to a hot, semi-arid climate. It is live here and runs entirely in the browser.
One FloorPlan document as the single source of truth
The whole app is driven by a single FloorPlan document, validated with a Zod schema and measured entirely in feet. That one document feeds:
- The 2D editor
- The 3D viewer
- The model thumbnails
- The climate score
- Edit in the 2D planner
- FloorPlan document (Zod, feet)
- 3D geometry derived from it
- Live 3D view
Building a 2D floor plan editor with react-konva
The editor is built on react-konva. You add, drag, resize and label rooms directly on the irregular boundary, with grid snapping and a live readout of area, Marla and plot coverage.
| Library | Job in the editor |
|---|---|
react-konva | The 2D canvas: adding, dragging, resizing and labelling rooms |
@flatten-js/core | Polygon containment, so rooms stay inside the plot |
earcut | Triangulating the footprint for area calculations |
From floor plan to live 3D with react-three-fiber
The same plan extrudes into 3D the moment you change it, using react-three-fiber over Three.js with helpers from @react-three/drei.
| Option | Choices |
|---|---|
| Render modes | Massing, Realistic, Blocks |
| Camera presets | Front, Back, Left, Right, Top, Iso |
Because the geometry is derived from the FloorPlan document, the 3D view is never out of sync with the 2D editor.
Undo and redo with Zustand and zundo, plus JSON export
State lives in a Zustand store, with zundo layered on top for time-travel undo and redo. That is essential for a design tool, where you experiment constantly.
- Undo and redo: Zustand plus
zundotime travel - Autosave: everything saves to localStorage
- Import and export: the plan travels as JSON, so a design is portable and shareable as a plain data file
Passive design scoring for a hot, semi-arid climate
Because three sides are blind party walls, every viable layout relies on a central courtyard (sehan) for light and cross-ventilation. homeStructure makes that trade-off visible with a live passive-design score, plus a checklist and sun diagram covering:
- Courtyard placement
- Shading
- Roof strategy
- Zoning
- Monsoon handling
What I learned building a browser-based design tool
- Derive, don't sync. Deriving 3D from a single validated document is far more robust than syncing two separate models.
- Solve the geometry early. Constraining an editor to an irregular boundary is mostly a geometry problem. Investing early in a solid containment-and-snapping layer paid off across every feature built on top of it.
homeStructure runs entirely in the browser, with no installs and no plugins. It is a small proof that climate-smart planning for a real, awkward plot can be approachable, visual and immediate. Try the live demo or read the homeStructure case study.
Frequently asked questions
Can you design a house in 3D in the browser?
Yes. homeStructure runs entirely in the browser with no installs or plugins. You draw a 2D floor plan on the real plot boundary and it builds in live 3D as you edit.
How do you keep a 2D floor plan and a 3D model in sync?
Do not sync them. In homeStructure, one Zod-validated FloorPlan document is the source of truth, and the 3D view, thumbnails and climate score are all derived from it.
How do you keep rooms inside an irregular plot?
Treat it as a geometry problem. The editor uses @flatten-js/core for polygon containment, respects locked party walls, snaps to a grid, and uses earcut to triangulate the footprint for area.
Why does the house design rely on a central courtyard?
Three of the plot's four sides are blind party walls, so every viable layout relies on a central courtyard (sehan) for light and cross-ventilation.
How does homeStructure handle undo and redo?
State lives in a Zustand store with zundo layered on top for time-travel undo and redo. Plans also autosave to localStorage and can be imported and exported as JSON.
Case study: homeStructure