Repolode
提交项目
wy51ai

wy51ai/floorplan-3d

纯前端户型装修工具，可在 2D 平面图上布置家具、拆改墙体，并一键切换到 3D 场景查看。

可替代:Planner 5DSketchUp

在 GitHub 查看
Star
2,479
Fork
472
未关闭 Issue
8
最近提交
18天前

这是什么？

floorplan-3d 是一个在浏览器中运行的户型布置与装修设计工具。用户可以在 1:60 或 1:100 比例的 2D 平面图上拖入 60 余种家具家电，进行移动、旋转、缩放，并测量尺寸、拆改非承重墙。整个应用是一个 index.html 文件，无需构建，打开即可使用。

3D 场景基于 Three.js 实现，支持鸟瞰、斜视、俯视等视角，也可以切换为第一人称漫游，桌面端用 WASD 与鼠标，触屏设备用虚拟摇杆。在 3D 中同样可以选中和拖动家具，并与 2D 方案实时同步。每个房间的地面材料可以更换，系统按面积加 5% 损耗估算造价。

方案自动保存在浏览器 localStorage 中，支持撤销重做，可导出 PNG 图片或 JSON 方案文件，界面支持中英文切换。户型数据、墙体、材料和家具库都写在 JavaScript 常量中，便于替换成自己的户型。3D 所需的 Three.js 通过 CDN 加载，首次打开 3D 场景需要联网。

核心功能

  • 01在 1:60 或 1:100 比例的 2D 平面图上拖入 60 余种家具家电。
  • 02提供鸟瞰、斜视、俯视等 3D 视角，并支持第一人称漫游。
  • 03测量尺寸并支持靠墙吸附，可拆改非承重墙。
  • 04自动统计房间面积与套内使用面积，并估算地面材料造价。
  • 05支持撤销与重做，方案自动保存在浏览器本地。
  • 06可导出 PNG 图片及 JSON 方案，也能导入已保存的方案。

适用场景

  • 在购买家具前规划公寓的家具摆放。
  • 在装修中试验拆墙或调整房间布局的效果。
  • 按房间估算地面材料的造价。
  • 替换为自己的户型数据与家具库，定制专属的设计工具。

快速上手

  1. 1

    克隆仓库

    git clone <仓库地址>
  2. 2

    进入仓库目录

    cd <仓库目录>
  3. 3

    用浏览器打开 index.html，或启动本地静态服务器

    python3 -m http.server 8000

使用前须知

  • 3D 场景通过 CDN 加载 Three.js，首次打开需要联网。

标签

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

常见问题

floorplan-3d 是什么？
纯前端户型装修工具，可在 2D 平面图上布置家具、拆改墙体，并一键切换到 3D 场景查看。 floorplan-3d 是一个在浏览器中运行的户型布置与装修设计工具。用户可以在 1:60 或 1:100 比例的 2D 平面图上拖入 60 余种家具家电，进行移动、旋转、缩放，并测量尺寸、拆改非承重墙。整个应用是一个 index.html 文件，无需构建，打开即可使用。
floorplan-3d 可以免费使用吗？用的什么许可证？
floorplan-3d 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
floorplan-3d 还在维护吗？
活跃维护中。floorplan-3d 最近一次提交是在 2026年10月2日。
floorplan-3d 适合用来做什么？
在购买家具前规划公寓的家具摆放。 在装修中试验拆墙或调整房间布局的效果。 按房间估算地面材料的造价。 替换为自己的户型数据与家具库，定制专属的设计工具。
floorplan-3d 怎么安装和运行？
克隆仓库: git clone <仓库地址> 进入仓库目录: cd <仓库目录> 用浏览器打开 index.html，或启动本地静态服务器: python3 -m http.server 8000
在哪里获取 floorplan-3d？
源代码和安装说明在 GitHub 上：https://github.com/wy51ai/floorplan-3d

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目