3D House Planner

What is 3D House Planner?

3D House Planner is an open-source spatial modeling application engineered to generate dynamic three-dimensional architectural layouts from 2D floor vector data. It solves the critical problem of spatial misjudgement during home planning, providing non-professionals and spatial designers with a precise canvas to simulate structural walls, window apertures, door openings, and interior furniture placements. The tool takes user-defined room dimensions—such as wall lengths measured in millimeters, wall heights, and corner angles—along with designated furniture models from an asset catalog. It processes these geometric inputs to calculate total floor area in square meters, wall surface areas, and volumetric dimensions, generating an interactive 3D web presentation rendered in real time. First, it features dual-viewport drawing capabilities, allowing users to draw wall vectors on a 2D grid while simultaneously generating rendered 3D geometry. Second, it includes a parametric object engine that automatically calculates doorway cutouts and window frames when snapping fixtures onto wall boundaries. Third, it provides dynamic area calculation, instantly calculating spatial metrics like room perimeter and net floor area as points are moved. Compared to heavy architectural suites like Autodesk Revit or SketchUp Pro, 3D House Planner focuses on rapid layout iteration. While professional CAD software requires extensive manual extrusion and mesh manipulation, this application automates wall geometry generation based on strict topological node placement.

How it works

Under the hood, the application converts 2D wall paths into 3D polygonal meshes using planar geometry algorithms and triangulation methods. When a user plots wall points on the Cartesian grid, the engine treats each line segment as a thick polygon defined by double parallel line offset calculations based on the user-specified wall thickness (e.g., 200 mm for exterior walls, 100 mm for interior partitions). Consider a rectangular room defined by four Cartesian coordinates: (0,0), (5000,0), (5000,4000), and (0,4000) measured in millimeters. The core engine calculates four wall vectors, computes corner mitering angles using cross-product mathematics, extrudes the 2D polygon along the Z-axis by a default height of 2800 mm, and applies UV texture mapping across the resulting mesh faces. The front-end framework relies on HTML5 Canvas and WebGL graphics standards, utilized via JavaScript rendering libraries such as Three.js or SVG manipulators. Render calculations occur entirely on the client's Graphics Processing Unit (GPU), utilizing shader programs to compute directional lighting, shadows, and material properties without external processing overhead. Geometric vector data, object coordinates, and material properties are stored locally in JSON format schema structures within memory. Since spatial vector transformations take place directly within the client execution stack, layout responsiveness remains fluid during real-time scene rotation and object translation operations.

How to use it

1. 1Step 1: Initialize a new project canvas and set the grid measurement unit to millimeters or inches depending on your structural schematic requirements. Step 2: Select the Wall Tool and click on the grid coordinates to plot room corners; enter explicit length values (such as 4500 mm) into the numeric prompt to constrain wall segments accurately. Step 3: Close the wall path loop by clicking back on the primary origin node (0,0) to automatically trigger floor polygon generation and mesh rendering.
2. 2Step 4: Drag door and window elements from the architectural library onto created wall segments, setting width parameters (e.g., 900 mm for doors, 1200 mm for double windows) to automatically cut opening apertures into the wall mesh. Step 5: Select furniture assets from the catalog, drag them into the floor plan, and use the 3D viewport axis handles to adjust object rotation and position. Step 6: Export the final layout state as a structural JSON configuration file or render a high-resolution PNG snapshot from the 3D camera view.

What it can do

• Utility

Use cases

Assumptions and limitations

Understanding the result

3D home design application. Plan rooms, furniture, and layouts.

Tool details

More design

References

• /3dhouseplanner — GitHub Repository

  Upstream project · GitHub

Frequently asked