Floorplan 3D：一个 index.html 文件，装修前置从凭感觉变成走一遍

一、引言

拿钥匙那天挺高兴，回家对着空荡荡的客厅就开始发愁。沙发靠哪面墙？卧室除了床和衣柜还塞不塞得下梳妆台？厨房做个 L 型橱柜，冰箱放哪边不挡道？这些问题光靠脑子里想、或者拿纸笔画几个方块，几乎想不出答案。找设计师吧，还没到出图那一步就得先聊预算；用酷家乐这类在线工具，注册账号、学半天操作，最后做出来的东西更像”设计秀”，而不是帮自己拍板的工具。

我后来在一个 GitHub 仓库里翻到一个思路完全不同的东西：整个项目就一个 index.html，浏览器打开就能画户型、摆家具，画完还能切到 3D 视角，用第一人称在里面走一圈。它叫 Floorplan 3D。

二、工具介绍

Floorplan 3D 是一个免费开源的网页户型设计与 3D 装修布局工具，仓库地址在 GitHub（wy51ai/floorplan-3d），MIT 协议，目前已经有 2.8k Star。

它的形态有点”离谱”：没有安装包，没有后端，没有注册登录，整个应用就是单个 HTML 文件。技术上说它是纯前端项目——2D 平面图用 SVG 绘制，3D 场景用 Three.js r160 跑起来，数据存在浏览器 localStorage 里。对你来说这些细节不重要，重要的是三件事：打开即用、方案不上传任何服务器、完全免费。

对比一下就知道这个定位有多克制。同类工具要么是本地软件（Sweet Home 3D、SketchUp），要下载安装、要学建模；要么是在线平台（酷家乐、三维家），要账号、要加载一堆素材库。Floorplan 3D 走的是第三条路：把它当成一张”能走进去的草稿纸”用。

三、功能详解

先在 2D 里把家具摆明白

打开文件后默认是 2D 平面模式，按 1:60 或 1:100 比例显示，尺寸单位是毫米。这对量过房的人很友好——户型图上的数字基本能直接对上。

左侧是家具库，60 多种家具家电，按卧室、客厅、餐厨、卫浴、家电、书房休闲分成六类，从床、衣柜、沙发、餐桌到马桶、冰箱都有。拖到画布上之后，位置、角度、尺寸都能调，家具靠近墙面会自动吸附，不用自己眯着眼睛对齐。

量房时最怕的就是”感觉能放下”。工具里有测量模式，选中两件家具拉一条线，距离直接显示出来。我在 3 米宽的客厅里试着摆了一张 2.2 米的三人沙发加 0.4 米边几，量完发现过道只剩 0.4 米——显然不行，当场换了个方案。这种”当场被打脸”的体验，恰恰是装修前最需要的。

墙体部分也有讲究：承重墙单独标示，非承重墙可以拆改。也就是说你可以把厨房和客厅之间那堵墙”拆掉”，看看开放式客厨到底显不显得大，再决定要不要跟工长提。面积统计是自动的，每个房间的面积和套内使用面积都实时更新。

切到 3D，从”能看”到”能走进去”

按 T 键切换到 3D。这是这个工具最值得单独说的部分。

静态视角有鸟瞰、斜视、俯视三种，适合整体看布局和检查家具之间是否打架。但真正解决问题的是第一人称漫游模式：WASD 移动，鼠标控制视角，走到门前按 E 还能把门推开。你可以在自己”未来的家”里从玄关走到阳台，感受动线顺不顺、过道挤不挤。触屏设备也有虚拟摇杆支持。

而且 2D 和 3D 是实时同步的——不是”画完导出再看”那种割裂流程。你在 3D 里发现沙发挡路，直接在 3D 视图里选中它拖走，切回 2D，平面图已经同步更新了。

家具模型做得比预期细：柜门有分缝和拉手，床头有软包，金属和陶瓷材质带环境反射。虽然比不上商业渲染平台，但作为”摆给自己看”的工具，这个精度足够形成空间感。

还有两个挺妙的场景功能。一个是日照时间滑块，拖一下就能看主卧下午有没有西晒、客厅冬天几点能晒到太阳。另一个是夜景灯光，晚上开灯走一圈，能顺便感受一下灯位合不合理。

方案管理和隐私

方案自动保存在浏览器本地，关掉再打开还在。想备份或者发给别人，可以导出 JSON 文件；想发朋友圈求意见，直接导出 PNG。地面材料支持木地板、地砖、大理石、水磨石、地毯等，换材料后会按面积加 5% 损耗自动估造价——装修报价时可以拿它反推材料用量靠不靠谱。

有一点要说明：户型数据只存在你自己的浏览器里，不经过任何服务器，这点对在意隐私的人挺重要。不过首次打开 3D 场景需要联网，因为 Three.js 是从 CDN 加载的，加载完之后基本就能断网用了。

四、实测体验

上手过程三十秒。git clone 仓库，用浏览器直接打开 index.html，或者启动个本地静态服务器（python3 -m http.server 8000）再访问 localhost。不写代码、不配环境。

我花了一个多小时，把自家户型照着量房数据描了出来，摆了大概四十件家具。整个过程比较顺手的几个点：贴墙吸附省了对齐时间；Ctrl+D 复制家具在摆同款床头柜时很好用；F 键一键回到全图，迷路了能马上找回来。

也遇到两个小问题。一是默认户型和我家不一样，需要自己在代码里改 WALLS 和 WINS 数据来定义墙体，README 里有说明，但对完全不懂代码的人有一点门槛——当然，量好尺寸后照着示例改数字，本质上还是”填表”。二是 localStorage 有容量限制，方案摆得很满的话，建议养成导出 JSON 的习惯。

整体感受：它不会让你做出杂志上那种效果图，但它能让你在动工之前，把”沙发到底放哪”这种问题真正想清楚。

五、对比分析

和常见方案摆在一起看更清楚。酷家乐、三维家这类在线平台，素材多、渲染强，但要注册、要学习、方案存在别人服务器上，更像给设计师用的。Sweet Home 3D 免费开源，但要装 Java 应用，界面也是上个时代的感觉。SketchUp 自由度最高，但学习成本直接劝退普通人。

Floorplan 3D 的位置很明确：它是决策工具，不是设计工具。模型库没有商业平台海量，精度也到不了 CAD 那个级别，出不了施工图。但如果你的需求是”装修前把家具摆明白、把动线走一遍”，它的门槛和体积优势非常明显。

六、总结

装修里最贵的其实是返工，而返工大多来自”当初没想清楚”。Floorplan 3D 把”想清楚”这件事的成本压到了最低：一个 HTML 文件、一个浏览器、一小时时间。

适合谁：准备装修或者正在装修的人、想重新布置房间的租房党、对纯前端实现 3D 漫游感兴趣的开发者。不适合谁：需要出正式施工图的人，或者追求照片级效果图的人。

仓库地址：github.com/wy51ai/floorplan-3d，克隆下来打开 index.html 就能开始。提醒一句：工具里的非承重墙拆改只是帮你”想清楚能不能拆”，实际砸墙之前，记得先问物业和结构师。