floorplan-3d：一个 HTML 文件里的户型装修设计工具

想给自家户型摆一摆家具、拆掉两面墙看看效果，通常得先装一套设计软件，或者去用那些按年收费的在线工具。floorplan-3d 把这件事压成了一个文件：整个应用就是 index.html，没有构建步骤，浏览器打开就能用。左边是 60 多种家具，中间是带毫米尺寸的平面图，右侧实时算房间面积和地面材料造价，按 T 或点顶栏就切到 Three.js 的 3D 场景。仓库 MIT 开源，主要语言 HTML，截至 2026-10-20 有 2,499 颗星。

这张截图是本地打开 index.html 后截的默认视图，示例户型自带 46 件家具，套内使用面积 87.18 m²。

核心功能

• 2D 平面布置：按原始户型 1:60 / 1:100 显示，尺寸单位是毫米。从左侧家具库拖入 60 余种家具家电，拖动移动、Shift 自由旋转、贴墙自动吸附，还有吸附墙面的测量工具和图层开关（尺寸、房间名、家具、网格、承重墙）。
• 拆改墙体：可以拆掉非承重墙，承重墙单独标示，不会和普通墙混在一起。
• 一键切 3D：3D 场景用 Three.js r160 渲染，支持鸟瞰、斜视、俯视，点右侧房间列表可以飞到对应房间；漫游模式在桌面端是 WASD 加鼠标，触屏设备用虚拟摇杆，门可以点开关。
• 2D 与 3D 实时同步：在 3D 里也能选中和拖动家具，改动会同步回平面方案，反过来也一样。墙可以切全高或剖切，日照时间用滑块调，也有夜景灯光。
• 面积与造价统计：自动算每个房间面积和套内使用面积；每个房间可换地面材料（木地板、地砖、大理石、水磨石、地毯等），按面积加 5% 损耗估算造价，示例户型的地面材料合计是 ¥25,077。
• 本地保存与导出：撤销 / 重做，方案自动存在浏览器 localStorage，支持导出 PNG 图片和导入 / 导出方案 JSON，界面可以切中文 / English。

典型使用场景

• 装修前自己先摆一遍：把户型尺寸画进去，试几种家具摆法，量一下通道宽度够不够，不用等设计师出图。
• 给出租房做预算：换地面材料时直接看到面积和估算金额，报价前心里有数。
• 想拆墙又拿不准的人：承重墙单独标示，拆改前先看清楚哪面不能动。
• 拿它当 3D 场景的起点：一个 HTML 文件，改几个数据结构就能换成自己的户型，也方便嵌进别的页面。

快速上手

不需要构建，克隆下来直接用浏览器打开 index.html：

git clone https://github.com/wy51ai/floorplan-3d.git
cd floorplan-3d
python3 -m http.server 8000
# 访问 http://localhost:8000

也可以不起服务器，直接双击 index.html。打开后先是 2D 平面图，按 T 切到 3D。要注意 Three.js 是从 jsDelivr CDN 加载的，第一次进 3D 场景需要联网。

户型数据写在 index.html 里，改这几个变量就能换成自己的户型：ROOMS 是房间多边形、名称和默认地面材料，WALLS 与 WINS 是墙体和窗洞，MATS 是地面材料名称与单价，LIB 是家具库。

小结

适合想快速试摆家具、拆墙看效果、顺带估一下地面造价的普通用户，也适合想拿一份能改的 3D 户型场景当起点的开发者。不适合要出施工图、要多人协作或要精确 BIM 流程的专业团队，它解决的是「打开就能试」，不是「画完就能施工」。

几个使用前要知道的点。仓库 2026-09-29 创建，2,499 颗星，最近一次推送是 2026-10-02，之后没有新提交；项目很新，作者是 wy51ai，README 里只留了 X 账号 @akokoi1。整个应用没有测试、没有构建、没有后端，index.html 一个文件 185 KB，所有逻辑都在里面，二次开发得直接读这个文件。3D 依赖 CDN 上的 Three.js，离线或 CDN 不通时只能停在 2D。我们只在本地用无头浏览器打开了 2D 界面，3D 场景没有实际验证过。和 Pascal Editor 那种走 WebGPU、带 MCP 接口、面向「人类和 AI 代理」的 3D 建筑编辑器相比，floorplan-3d 更轻，也不带协作与导出施工图的能力。HTML，MIT。