Floorplan 3D: A Single-File Home Design Tool

Planning a room in 2D is quick, but it can be hard to tell whether a layout will feel right once you are standing in it. floorplan-3d bridges that gap with a browser-based home design tool: arrange a floorplan, change walls, and measure dimensions in 2D, then switch to an interactive Three.js scene to inspect the result from above or walk through it.

The project is unusually easy to try. Its application is a single index.html, built with native HTML, CSS, and JavaScript rather than a framework or a build pipeline. Clone the repository and open the file in a browser; no package installation is required. The main exception is the 3D engine, which loads Three.js r160 from jsDelivr, so the first 3D view requires an internet connection.

Move from a measured plan to a room you can explore

The 2D editor is designed for practical layout work, not just sketching. It displays the plan at a 1:60 or 1:100 scale and uses millimeters for dimensions. A library of more than 60 furniture and appliance items covers bedrooms, living rooms, kitchens and dining areas, bathrooms, household appliances, and study or leisure spaces. Drag items onto the plan, move or resize them, and rotate them; holding Shift allows free-angle rotation. Furniture can also snap to walls automatically.

A measurement tool makes it possible to check clearances and wall lengths directly on the plan. It snaps near walls, and Shift constrains measurements to horizontal or vertical directions. For renovation planning, non-load-bearing walls can be marked for removal, while load-bearing walls are identified separately. Visibility controls let you hide or show dimensions, room names, furniture, the grid, and load-bearing walls as needed.

That distinction matters: the editor can help visualize a proposed change, but a drawing tool is not a structural assessment. Treat wall-removal markings as design annotations and consult a qualified professional before making structural changes.

Inspect the design in interactive 3D

Press T to switch between the 2D plan and the 3D scene. The 3D view offers bird’s-eye, angled, and top-down perspectives. You can also select a room from a list to fly the camera to it. For a more immersive check, roaming mode supports WASD and mouse controls on desktop, with a virtual joystick on touch devices. Doors can be opened and closed while exploring.

The scene is more than a rough blockout. The project includes detailed furniture models with features such as cabinet-door seams and handles, upholstered bed headboards, and reflective metal and ceramic materials. Furniture can be selected and moved in 3D too, with changes synchronized back to the 2D layout. Wall display can switch between full-height and cutaway views, while a sunlight-time slider and night lighting help reveal how the space reads under different conditions.

Compare materials and keep track of changes

The application automatically calculates room areas and total usable interior area. Each room can be assigned a floor finish, including wood flooring, tile, marble, terrazzo, and carpet. Material estimates use the room’s area plus 5% extra for waste, giving a useful starting point for rough budgeting.

Editing is supported by undo and redo, and plans are saved automatically in the browser’s localStorage. You can export a PNG image for sharing or export and import the full plan as JSON. The interface supports Chinese and English; the language switch is in the upper-right corner, and the selection is remembered.

Because localStorage is browser-local, it is not a substitute for a portable backup. Export the JSON if you want to move a design to another browser or preserve a copy outside the current browser profile.

Get started

Clone the repository, then either open index.html directly or run a small static server:

git clone <repository-url>
cd <repository-directory>
python3 -m http.server 8000

Visit http://localhost:8000 in your browser. A server is optional, but it can make local-file behavior more consistent across browsers. The 2D editor works without a build step; the first 3D view needs network access to fetch Three.js from jsDelivr.

Useful keyboard shortcuts

Key	Action
T	Switch between 2D and 3D
V / M / X	Select, measure, or mark walls for modification
R / Shift+R	Rotate selected furniture 90° clockwise or counterclockwise
Delete / Backspace	Delete selected furniture
Ctrl/⌘ + D	Duplicate selected furniture
Ctrl/⌘ + Z / Ctrl/⌘ + Shift + Z	Undo / redo
F	Fit the plan to the window
+ / -	Zoom in / out
[ / ]	Collapse or expand the side panels
Shift + F	Toggle full-screen mode
Esc	Cancel the current operation

In roaming mode, use WASD or the arrow keys to move, Shift to walk faster, and E to operate doors.

Adapt it to a different floorplan

The project keeps its design data in index.html, making it approachable for developers who want to customize the demo. The main data structures are ROOMS for room polygons, names, and default flooring; WALLS and WINS for walls and window openings; MATS for material names and prices; and LIB for furniture types, labels, default dimensions, and colors. The buildFurniture() function defines the corresponding 3D models.

For a custom home, update those definitions to match the geometry and materials you need, then adjust furniture entries or model-building logic as appropriate. Keeping the plan data and rendering code together is convenient for a small, self-contained tool, though a larger application would likely benefit from separating data, rendering, and interface logic into modules.

Released under the MIT License, floorplan-3d is both a usable planning tool and a compact example of a no-build web application combining SVG-based 2D editing with a Three.js interior view. The repository reports 3.7k stars and 778 forks, and its implementation is entirely HTML according to the language breakdown. For developers, the appeal is clear: clone it, try a layout immediately, and inspect how a single file can support a surprisingly complete design workflow.

Source

wy51ai/floorplan-3d