PlanTo3D: Walkable 3D House Generated from a 2D Architectural Floor Plan
A browser-native Three.js application that extrudes a multi-story 2D architectural blueprint into a walkable 3D residence with floor isolation, day/night lighting, and procedural materials.
Three.jsTypeScriptViteWebGL
Context
Homeowners and non-architects struggle to judge room proportions, sightlines, and natural light from flat 2D CAD drawings, while desktop BIM viewers are too heavy to share via a simple link.
Scope I disclose publicly
- Coordinate-accurate extrusion of multi-story walls, doorways, windows, stairs, balconies, and structural columns directly from 2D plan dimensions.
- Procedurally generated PBR canvas textures (marble, parquet, zellige tiles, plaster) that keep initial load tiny with zero external texture downloads.
- Dual navigation modes: orbital dollhouse inspection with per-floor isolation and first-person interior walkthrough with interactive doors and lighting presets.
Decisions and trade-offs
- Generating all materials procedurally on HTML5 canvases so the entire 3D house loads in seconds over mobile connections.
- Implementing lightweight spatial collision checks so first-person walkthroughs feel natural without pulling in a heavy physics engine.
- The trade-off: real-time WebGL prioritizes 60 FPS interactivity and instant sharing over offline ray-traced photorealism.
You can inspect and walk through the 3D house directly in the browser at mbardouni.dev/house/.
Check the public sourceDisclosure: This is a self-contained interactive 3D engineering showcase.