Floor Plan Interior Designer

中文 | English

A pure front-end tool for interior design on a floor plan: place furniture, remove or modify walls, and take measurements on a 2D plan, then switch to a Three.js 3D scene with one click — view it from above or walk through it in first person. The whole app is a single index.html: no build step, just open it.

Features

2D Floor Plan

• Displays the original floor plan at 1:60 / 1:100 scale, dimensions in mm
• Drag 60+ furniture and appliance items from the library on the left (bedroom, living room, dining & kitchen, bathroom, appliances, study & leisure)
• Move, rotate (hold Shift for free angle), and resize items, with automatic snapping to walls
• Measuring tool (snaps to nearby walls; hold Shift to lock horizontal / vertical)
• Remove or modify non-load-bearing walls; load-bearing walls are marked separately
• Layer toggles: dimensions, room names, furniture, grid, load-bearing walls

3D Scene

• Bird's-eye, oblique, and top-down views; click a room in the list to fly to it
• Walkthrough mode: WASD + mouse on desktop, virtual joystick on touch devices; click doors to open / close them
• Toggle between full-height and cut-away walls, time-of-day sunlight slider, night lighting
• Detailed furniture models: cabinet door gaps and handles, upholstered headboards, metal and ceramic materials with environment reflections, and more
• Select and drag furniture in 3D as well, kept in sync with the 2D plan in real time

Plans & Statistics

• Automatic calculation of room areas and net usable floor area
• Change the floor material of each room (wood, tiles, marble, terrazzo, carpet, etc.), with cost estimates based on area plus 5% wastage
• Undo / redo; plans are auto-saved in the browser's local storage
• Chinese / English UI toggle (button on the right of the top bar; defaults to Chinese and remembers your choice)
• Export to PNG, export / import plans as JSON

Quick Start

git clone <repository-url>
cd <repository-directory>

Then simply open index.html in your browser. Alternatively, start a local static server:

python3 -m http.server 8000
# Visit http://localhost:8000

Three.js is loaded from the jsDelivr CDN, so an internet connection is required the first time you open the 3D scene.

Keyboard Shortcuts

Key	Action
T	Toggle 2D / 3D
V / M / X	Select / Measure / Modify walls
R / Shift+R	Rotate selected furniture 90° clockwise / counterclockwise
Delete / Backspace	Delete selected furniture
Ctrl/⌘ + D	Duplicate selected furniture
Ctrl/⌘ + Z, Ctrl/⌘ + Shift + Z	Undo, redo
F	Fit to window
+ / -	Zoom in / out
[ / ]	Show / hide the furniture library (left) and the side panel (right)
Shift + F	Fullscreen
Esc	Cancel current action
Walkthrough: WASD / arrow keys, Shift, E	Move, walk faster, open / close doors

Tech Stack

• Vanilla HTML / CSS / JavaScript — no framework, no build step
• 2D floor plan rendered with SVG
• 3D scene built with Three.js r160 (OrbitControls, PointerLockControls, RoundedBoxGeometry, RoomEnvironment, CSS2DRenderer)
• Data stored in localStorage

Customizing the Floor Plan

The floor plan data lives in index.html:

• ROOMS: room polygons, names, and default floor materials
• WALLS / WINS: walls and window openings
• MATS: floor material names and unit prices
• LIB: furniture library (type, name, default size, color)
• buildFurniture(): 3D models for each furniture type

Edit this data to use your own floor plan.

Social Media

• X (Twitter): @akokoi1

License

MIT