floorplan-3d：一个index.html装下整套户型装修设计工具，2D摆家具+3D第一人称漫游最新版

一、项目概览

wy51ai/floorplan-3d 是一个纯前端的户型装修设计工具：在 2D 平面图上拖放家具、拆改墙体、量尺寸，一键切到 Three.js 的 3D 场景，可以俯瞰也可以第一人称走进去逛。

它最反直觉的地方在于：整个应用就是一个 index.html。没有 npm install，没有打包构建，没有后端，双击打开就能用。

截至 2026 年 10 月 8 日的真实数据：

• Stars：1,787 / Forks：337 / Open Issues：6
• 创建时间：2026-09-29，最后推送 2026-10-02（上线仅 9 天就冲到 1787 Stars）
• 许可证：MIT
• 仓库文件数：5 个——index.html、README.md、README.en.md、LICENSE、.gitignore，仅此而已
• index.html：2,674 行，185,528 字节（约 181 KB）
• 提交记录：9 次 commit，首个 commit 就是 init
• 作者：X（Twitter）@akokoi1；贡献者 wuyi51（7 次）、wy51ai（1 次）

仓库里没有任何截图资源，也没有配 Demo 站点和 topics——一个非常”野生”、但因为足够好用而被自发传播的项目。

二、2D 平面布置：按毫米算的真实户型

和那些”示意图级别”的在线户型工具不同，这个工具是按真实建筑尺度来的：

• 按原始户型 1:60 / 1:100 比例显示，尺寸单位 mm
• 内置一套三居室示例户型（源码里的 ROOMS 常量），包含：主卧室、主卫浴、子女房、小孩房、客卫浴、厨房、餐厅、客厅、过道、洗衣阳台、休闲阳台，外加两个飘窗区域
• 房间坐标直接用毫米写死，例如客厅是 R(4820,6610,10270,10560)——一个约 5.4m × 3.9m 的空间

能做的事

• 从左侧家具库拖入 60 余种家具家电，六个分类：卧室（12）、客厅（14）、餐厨（11）、卫浴（8）、家电（9）、书房·休闲（6）
• 拖动移动、旋转（Shift 自由角度）、改尺寸，贴墙自动吸附
• 测量工具：靠近墙面自动吸附，Shift 锁定水平/垂直
• 拆改非承重墙，承重墙单独标示（这点很少见，多数工具不区分）
• 图层开关：尺寸标注、房间名、家具、网格、承重墙

家具库样例

三、3D 场景：从沙盘俯瞰到走进去逛

• 多视角切换：鸟瞰、斜视、俯视；点击房间列表可”飞”到对应房间
• 漫游模式：桌面 WASD + 鼠标视角，触屏设备用虚拟摇杆，还能按 E 开关门
• 全高墙 / 剖切墙切换——剖切墙就是把墙切到半高，方便从外面看到室内布局
• 日照时间滑块 + 夜景灯光，能看不同时段的光影
• 精细家具模型：柜门分缝与拉手、软包床头、带环境反射的金属与陶瓷材质
• 在 3D 里也能选中、拖动家具，与 2D 方案实时双向同步

最后这条是整个项目的灵魂：2D 和 3D 不是两个割裂的视图，而是同一份数据的两种呈现。在 3D 里挪一下沙发，切回 2D 平面图位置也跟着变了。

四、装修测算：面积、材料、造价

这是它超出”画图工具”范畴的地方——真的在做家装预算：

• 自动统计每个房间面积与套内使用面积（源码里飘窗用 counted:false 标记为不计面积，符合国内建筑面积计算习惯）
• 为房间更换地面材料，内置 8 种：

造价估算公式为 面积 × 单价 × 1.05，也就是按面积加 5% 损耗——这正是装修行业算地砖用量的常规做法。

其它实用件

• 撤销 / 重做
• 方案自动存浏览器本地（localStorage），刷新不丢
• 中英双语切换，顶栏右侧按钮，默认中文，选择会记住
• 导出 PNG 图片，导出 / 导入方案 JSON（方便备份和分享）

五、快捷键

六、技术栈：极简到有点极端

• 原生 HTML / CSS / JavaScript，无框架、无构建步骤
• 2D 平面图用 SVG 绘制
• 3D 用 Three.js r160（OrbitControls、PointerLockControls、RoundedBoxGeometry、RoomEnvironment、CSS2DRenderer）
• Three.js 通过 jsDelivr CDN + importmap 加载：https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js
• 数据全部存 localStorage，不上传任何服务器

跑起来

git clone https://github.com/wy51ai/floorplan-3d.git
cd floorplan-3d
# 直接双击 index.html 即可
# 或者起个静态服务器：
python3 -m http.server 8000   # 访问 http://localhost:8000

注意：首次打开 3D 场景需要联网（要去 CDN 拉 Three.js），之后浏览器会缓存。

七、换成你自己的户型

户型数据全部以常量的形式写在 index.html 里，改这几处就能换成自己家：

这种”改数据不改代码”的组织方式，让它既是成品工具，也是一个很不错的 Three.js 学习样例。

八、局限（用之前最好先知道）

1. 没有图形化的画户型功能。它只能编辑内置的示例户型——想换成自己家，必须手改 index.html 里的坐标数组。对不会写代码的用户来说，这是最大的门槛。
2. 不支持导入 CAD / 图片户型图。没有 AI 识图，也没有 DXF 解析，一切靠手写多边形。
3. 数据只存本地 localStorage。换浏览器、清缓存、换设备都看不到原方案，必须手动导出 JSON 备份。
4. 依赖 CDN。首次开 3D 必须联网；如果 jsDelivr 在你所在的网络环境被墙或很慢，可以把 Three.js 下载到本地改 importmap 指向。
5. 家具数量多时性能压力都在浏览器。181 KB 的单文件 + 精细模型，低端设备或手机上 3D 漫游可能掉帧。
6. 9 次 commit 的极早期项目。功能密度很高，但生态建设几乎为零：没有 Issue 模板、没有 CI、没有测试、文档中 Demo 缺失。

九、同类工具对比

十、总结

floorplan-3d 的魅力在于克制的野心：它不打算变成下一个酷家乐，只是把一个家装业主真正会用到的东西——按真实尺寸摆家具、拆非承重墙、算面积、估材料造价、然后走进去看看——用一个 index.html 全部做完。

「不用注册、不联网也能用（除首次拉 CDN）、数据不出浏览器」这三点，在当下这个什么都往云上搬的时代反而成了稀缺属性。

适合谁：正在装修、想自己摆摆家具看看效果的业主；想要一个可直接改的 Three.js + SVG 实战样例的前端开发者；需要给客户做轻量方案演示的设计师／中介。

不适合谁：需要精确施工图或水电定位的专业设计师；希望拍照／导 CAD 自动生成户型的用户（它做不到）。

参考来源：GitHub 仓库 README.md、README.en.md 与 index.html 源码（MIT 许可）、GitHub REST API 元数据。文中 Star 数、文件体积与提交记录为 2026 年 10 月 8 日实际抓取数据。