Repolode
Submit
wy51ai

wy51ai/floorplan-3d

A front-end-only floor plan tool for arranging furniture, editing walls and measuring rooms in 2D, then viewing the layout in a Three.js 3D scene.

Open-source alternative to:Planner 5DSketchUp

View on GitHub
Stars
2,479
Forks
472
Open issues
8
Last commit
18 days ago

What is it?

floorplan-3d is a browser-based home layout and decoration tool. You place furniture on a 2D floor plan at 1:60 or 1:100 scale, drag and rotate items, measure distances, and remove non-load-bearing walls. The whole app is a single index.html file with no build step, so it runs by opening the page in a browser.

The 3D view is built with Three.js and offers bird's-eye, oblique and top-down angles, plus a first-person roaming mode with keyboard, mouse or a touch joystick. Furniture can be selected and moved in 3D, and changes sync back to the 2D plan. Each room's floor material can be swapped, with cost estimated from area plus 5% waste.

Designs are saved in localStorage, support undo and redo, and can be exported as PNG or JSON. The interface switches between Chinese and English. Room data, walls, materials and the furniture library are defined in plain JavaScript constants, so you can adapt it to your own floor plan. Three.js loads from a CDN, so the 3D view needs an internet connection.

Key features

  • 01Drag 60+ furniture and appliance items onto a 2D plan at 1:60 or 1:100 scale.
  • 02Switch between bird's-eye, oblique and top-down 3D views, or roam in first person.
  • 03Measure distances with wall snapping and remove non-load-bearing walls.
  • 04Automatically calculate room and usable areas, and estimate flooring cost.
  • 05Undo and redo edits, with the plan saved in browser local storage.
  • 06Export the layout as PNG or JSON and import saved plans.

Use cases

  • Planning furniture placement in an apartment before buying pieces.
  • Testing wall removal or room layout changes in a renovation.
  • Estimating flooring material costs room by room.
  • Customizing the floor plan and furniture library for your own home data.

Quick start

  1. 1

    Clone the repository

    git clone <仓库地址>
  2. 2

    Enter the repository directory

    cd <仓库目录>
  3. 3

    Open index.html in a browser, or start a local static server

    python3 -m http.server 8000

Things to know

  • The 3D scene loads Three.js from a CDN, so it needs an internet connection on first open.

Topics

#floor-plan#interior-design#threejs#3d#javascript#html5-canvas#visualization

FAQ

What is floorplan-3d?
A front-end-only floor plan tool for arranging furniture, editing walls and measuring rooms in 2D, then viewing the layout in a Three.js 3D scene. floorplan-3d is a browser-based home layout and decoration tool. You place furniture on a 2D floor plan at 1:60 or 1:100 scale, drag and rotate items, measure distances, and remove non-load-bearing walls. The whole app is a single index.html file with no build step, so it runs by opening the page in a browser.
Is floorplan-3d free to use? What license does it have?
floorplan-3d is open source under the MIT license. Check the license terms before using it in commercial products.
Is floorplan-3d still maintained?
Actively maintained. The last commit to floorplan-3d was on Oct 2, 2026.
What can I use floorplan-3d for?
Planning furniture placement in an apartment before buying pieces. Testing wall removal or room layout changes in a renovation. Estimating flooring material costs room by room. Customizing the floor plan and furniture library for your own home data.
How do I install floorplan-3d?
Clone the repository: git clone <仓库地址> Enter the repository directory: cd <仓库目录> Open index.html in a browser, or start a local static server: python3 -m http.server 8000
Where can I get floorplan-3d?
The source code and installation instructions are on GitHub: https://github.com/wy51ai/floorplan-3d

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects