floorplan-3d — 单文件户型装修设计，2D 摆家具 3D 漫游的开源工具

floorplan-3d（中文名「户型装修设计」）是开发者 @akokoi1 用原生 HTML、CSS、JavaScript 写的一款户型布置工具，项目托管在 GitHub，以 MIT 协议开源，属于不折腾人的开源软件。整个应用只有一个 index.html，没有构建步骤，下载后用浏览器打开就能用。它在 2D 平面图上提供家具拖拽、墙体拆改、尺寸测量，按 T 键即可切到 Three.js 渲染的 3D 场景，既能鸟瞰全屋，也能第一人称走进房间看真实效果。

场景痛点

准备装修或换家具时，多数人想先在自家户型上摆摆看：沙发能不能塞进客厅，床和衣柜会不会打架，餐桌旁还剩多少过道。商业装修软件要么要注册登录，要么安装包庞大，临时试一下不值得；手绘平面图又很难想象真实的空间感。floorplan-3d 把这件事压缩成一个网页文件，这个 Web应用打开即试、改完自动存住，很适合想自己摆弄布局的生活方式场景。

主要功能特点

2D 平面布置

按原始户型 1:60 / 1:100 比例显示，尺寸单位 mm
从左侧家具库拖入 60 余种家具家电（卧室、客厅、餐厨、卫浴、家电、书房休闲）
拖动移动、旋转（Shift 自由角度）、调整尺寸，贴墙自动吸附
测量工具（靠近墙面自动吸附，Shift 锁定水平 / 垂直）
拆改非承重墙，承重墙单独标示
图层开关：尺寸标注、房间名、家具、网格、承重墙

3D 场景

鸟瞰、斜视、俯视多种视角，点击房间列表可飞到对应房间
漫游模式：桌面端 WASD + 鼠标，触屏设备用虚拟摇杆，可以点门开关
全高墙 / 剖切墙切换，日照时间滑块，夜景灯光
精细家具模型：柜门分缝与拉手、软包床头、带环境反射的金属与陶瓷材质等
在 3D 中也能选中、拖动家具，与 2D 方案实时同步

方案与统计

房间面积与套内使用面积自动统计
为每个房间更换地面材料（木地板、地砖、大理石、水磨石、地毯等），按面积加 5% 损耗估算造价
撤销 / 重做，方案自动保存在浏览器本地
中文 / English 界面切换（顶栏右侧按钮，默认中文，选择会记住）
导出 PNG 图片，导出 / 导入方案 JSON

按比例 2D 平面拖家具

画布按原始户型以 1:60 或 1:100 比例显示，尺寸单位为毫米。左侧家具库收录 60 余种家具家电，覆盖卧室、客厅、餐厨、卫浴、家电、书房休闲几大类，拖入画布即可摆放。家具支持拖动移动、旋转角度、调整尺寸，贴墙自动吸附对齐，配合图层开关可随时隐藏标注或网格，是一款轻量顺手的设计工具。

测量工具与拆改墙体

测量工具放在左侧工具栏，拖动测量线靠近墙面时自动吸附，按住 Shift 可锁定水平或垂直方向，量房间进深开间很顺手。户型墙体分承重墙与非承重墙，承重墙单独标示，拆墙模式下只能拆改非承重墙，避免方案脱离结构常识。尺寸标注、房间名、家具、网格、承重墙都有独立开关，想只看空间轮廓时一层层关掉即可。

3D 鸟瞰与第一人称漫游

按 T 键从 2D 切到 3D，Three.js 会按平面方案重建整屋场景，提供鸟瞰、斜视、俯视多个视角，点击房间列表可直接飞到对应房间。漫游模式下桌面端用 WASD 加鼠标行走，触屏设备出现虚拟摇杆，走到门前按 E 开门进出。3D 里也能选中拖动家具，改动与 2D 实时同步，逛自己家成了一种有意思的数字生活体验。

日照夜景与精细家具材质

3D 场景支持全高墙与剖切墙两种显示，剖切后能从侧面看清家具之间的位置关系；日照时间滑块可以移动太阳角度，观察一天里光线落在地板上的变化，夜景模式则点亮室内灯光。家具模型做得比较细，柜门有分缝和拉手，床头是软包质感，金属与陶瓷表面带环境反射。首次加载 3D 需联网从 CDN 拉取 Three.js。

面积统计与地面材料造价

每个房间的面积和套内使用面积会自动统计，换地面材料时数字同步更新。材料库提供木地板、地砖、大理石、水磨石、地毯等选项，选中后按房间面积加 5% 损耗估算造价。方案支持导出 PNG 保存视图，也能导出 JSON 下次导入接着改，是装修前期顺手的效率工具。

快捷键与撤销重做

操作基本都有快捷键：T 切 2D/3D，V、M、X 分别切换选择、测量、拆墙，R 旋转 90 度，Delete 删除家具，Ctrl 加 D 复制，Ctrl 加 Z 撤销，F 适应窗口，Shift 加 F 全屏。误操作有撤销重做兜底。作为一款无需安装的在线工具，方案自动写在浏览器 localStorage 里，关掉网页再打开，上次摆的家具还在原处。

自定义户型与技术栈

户型数据直接写在 index.html 里：ROOMS 定义房间多边形与默认地面，WALLS 和 WINS 描述墙体与窗洞，MATS 列出材料名与单价，LIB 和 buildFurniture() 维护家具库与 3D 模型，改数组即可换成自己家户型。这份开源项目纯原生实现，2D 用 SVG 绘制，3D 用 Three.js r160，无框架无构建，适合前端开发者通读学习。

项目地址

GitHub 访问

在线体验：访问

下载地址

https://pan.quark.cn/s/b0fd1ee196c2

https://www.guangyapan.com/s/1962713525441880090_aeWhI5wocgzRgCO6 （光鸭新用户注册福利：永久免费空间：所有新用户注册即可解锁 2TB 永久免费存储空间，无需额外任务或付费）

floorplan-3d — 单文件户型装修设计，2D 摆家具 3D 漫游的开源工具

场景痛点