Room Builder is a floor-plan and furniture planner that works in real measurements: centimetres with two decimals, walls with real thickness, doors and windows that sit in the walls. I built it to plan my own flat, and it runs as a single HTML file with no dependencies, straight from disk or from a static host.
The problem
I wanted to know whether furniture would fit before carrying it in. The planners I tried were either drag-and-guess toys or heavy apps behind an account. I needed exact sizes, distances to the walls while dragging, doors that show their swing, and a quick 3D look to judge proportions.
The approach
The plan is drawn on a canvas that redraws from one small model: rooms, walls, openings and pieces, each with a position, size, rotation and colour. Pieces snap to the grid, to walls and to each other's edges, and overlaps are checked exactly with a separating-axis test, including rounded and L-shaped pieces. Interior walls cut the floor into rooms automatically with a flood fill, so rooms are never drawn by hand. The 3D view is plain WebGL I wrote myself, without three.js: walls are built around their doors and windows, rounded shapes are triangulated by ear clipping, and walls between you and the room drop down so you can see in.
Highlights
- checkCentimetre precision with two decimals, and number fields you can scrub by dragging their label
- checkLive distances to the nearest walls while you drag, plus a measure tool that snaps to corners
- checkDoors and windows live in the walls, with hinge side and swing direction
- checkHand-written WebGL 3D view with cutaway walls, no libraries
- checkSeveral layouts side by side to compare, undo/redo, autosave plus JSON files
- checkPrints true to scale (1:20 to 1:200, A4 or A3) with a scale bar, for a PDF to take to the shop