装修党注意：这个开源项目能让你把自家户型在浏览器里装一遍

项目：wy51ai/floorplan-3d（MIT 许可） · 在线试用：wy51ai.github.io/floorplan-3d · 本篇为中文实测与解读

装修前总有那么几天特别想折腾：沙发买三人位还是双人位？床掉个头会不会更顺？这堵墙砸了客厅到底能不能亮一点？

现实里家具买错了是真肉疼，退货运费都够喝一壶。那就先在浏览器里把家装一遍——左边是精确到毫米的 2D 平面图，拖家具、量尺寸、拆非承重墙；按一下 T 切到 Three.js 的 3D 场景，鸟瞰整套房子，或者用 WASD 第一人称走进去，站在客厅里看看「3 米」到底有多远。

整个应用就是一个 index.html，2675 行，没有框架、没有构建步骤、没有后端，拉下来双击就能用。9 月 29 日才创建，到 10 月 7 日我写这篇时已经 1495 颗星、301 次 fork，还上过 GitHub Trending 的新项目周榜。issue 区里问得最多的不是技术问题，而是「怎么改成我家的户型」——这句话本身就说明了它接住的是什么需求。

也先说清楚它不是什么：不是 CAD，不出施工图，不能替代设计师，也不做结构安全校验。下面所有数字和截图都来自我在浏览器里的实际运行，不是照抄 README。

一、它到底能做什么

把功能拆开看，它其实是四块东西拼起来的：2D 平面布置负责「摆」，3D 场景负责「看」，统计面板负责「算钱」，文件菜单负责「带走」。

四块之间的数据是同一份。你在 2D 里把沙发挪了 20 厘米，切到 3D 沙发的 3D 模型也跟着挪；反过来在 3D 里选中拖动，切回 2D 位置同样变了。这一点在实测中反复验证过，不是宣传语。

floorplan-3d 四大功能模块 — 四块功能的分工。左上是 2D 平面布置，右上是 3D 场景，左下是方案与统计，右下是文件与快捷键。所有能力都写在一个 `index.html` 里，没有第二个文件。

二、2D 平面布置：拖进去、吸上去、拆掉它

打开页面默认就是 2D 视图，比例 1:60，也可以切到 1:100。尺寸单位是毫米，工具栏右侧实时显示当前比例和光标坐标。

左边一列是家具库，分卧室、客厅、餐厨、卫浴、家电、书房·休闲六大类共 60 件，每件都带默认尺寸和颜色——比如「双人床 1.8m」是 1800×2000，「三人沙发」是 2400×900。拖进平面图后可以自由移动、旋转（按住 Shift 是任意角度，不按是 90° 步进）、改尺寸。靠近墙面时会自动吸附对齐，不用手动对像素。

工具栏上的「测量」和「拆改墙体」是两个独立模式。测量靠近墙面会自动吸附到墙线，按住 Shift 锁定水平或垂直；拆改墙体只对非承重墙生效，承重墙在图上单独标示、不给拆。

右侧面板顶上是一排图层开关：尺寸标注、房间名、家具、网格、承重墙、贴墙吸附，可以随时关掉其中任意一层，让画面干净下来。

floorplan-3d 的 2D 平面布置界面实测截图 — 2D 视图实测。左侧是 6 大类 60 件的家具库，中间是按 1:60 绘制的平面图（标注了每一段墙的毫米尺寸），右侧是房间面积表和地面材料估算。底部状态栏显示这份默认方案已经摆了 46 件家具、套内使用面积 87.18 ㎡。

floorplan-3d 家具库的六类构成 — 家具库的构成：客厅 14 件、卧室 12 件、餐厨 11 件、家电 9 件、卫浴 8 件、书房·休闲 6 件，合计 60 件。作者把自己家的户型数据直接写进了源码，所以打开页面不是空白画布，而是一套已经摆好 46 件家具的完整方案。

三、地面材料与造价：换一块地砖，价格当场变

点右侧房间列表里的任意一行，面板会切到这个房间的属性页。以客厅为例，它给出的是：使用面积 21.53 ㎡、周长 18.8 m、开间 5450 mm、进深 3950 mm，以及按层高 2.8 米估算的墙面面积约 52.6 ㎡（未扣门窗）。下面列出这个房间里已有的 8 件家具及其尺寸。

再往下是可以换的地面材料。内置 8 种，每种都带单价：大理石 650、胡桃木地板 380、橡木地板 320、水磨石 280、800 地砖 220、满铺地毯 200、600 地砖 160、300 防滑砖 140（单位都是元 / ㎡）。点一下就能给当前房间换掉，估价和全屋合计立刻重算——算法是按房间面积加 5% 损耗，不是简单乘单价。

floorplan-3d 的房间属性与地面材料面板 — 选中客厅后的属性面板。上半部分是面积、周长、开间、进深和墙面面积；中间是 8 种地面材料及单价（当前选中 800 地砖 ¥220/㎡）；下面是房间内的 8 件家具明细。这个房间的材料估价是 ¥4,973。

四、3D 场景：从鸟瞰到剖切墙

点工具栏的「3D 场景」就切进 Three.js 场景（Three.js 走 jsDelivr CDN，首次进入需要联网）。顶栏给了四种视角：鸟瞰、斜视、俯视、漫游。左侧房间列表点一下就飞到对应房间，不用自己转镜头。

这里有两个很实用的开关。一是「全高墙 / 剖切墙」：全高墙是你从外面看到的样子，切到剖切墙之后墙体被压到半高，室内布局一览无余——这才是真正能看清户型的那一档。二是「日照」滑块 + 「夜景」：拖动滑块能改变太阳角度，看不同时段的光影进屋情况；点「夜景」整场景转成傍晚灯光，窗户和灯带会亮起来。另外还有「家具」和「房间名」两个显示开关。

floorplan-3d 的 3D 鸟瞰视图 — 3D 鸟瞰视图。右上角工具栏是四种视角切换，第二排是撤销重做、清空布置、全高墙/剖切墙、家具与房间名显示、夜景与日照滑块（当前 10:00）。每个房间上方的名字和面积是 CSS2D 标签，点一下就飞到那个房间。

floorplan-3d 的剖切墙模式 — 切到剖切墙之后的效果。墙体降到半高，卧室的床、客厅的沙发、厨房的橱柜、阳台的休闲椅全部露出来，判断「动线顺不顺」比看平面图直观得多。

floorplan-3d 的夜景灯光模式 — 夜景模式。背景转深，室内灯光亮起，能看出采光和灯位的大致分布。家具模型不是纯色块——柜门有分缝和拉手，床头是软包，金属和陶瓷走的是环境反射材质。

五、第一人称漫游：在自家客厅里走两步

「漫游」是四种视角里最有意思的一个。切进去之后相机降到人眼高度，从入户门开始，桌面端用 WASD 或方向键移动、鼠标转视角、按住 Shift 快走、按 E 开关身前的门、Esc 退出；触屏设备上是虚拟摇杆。实测时站在客厅朝休闲阳台方向看，落地窗、茶几、单人沙发的比例关系一眼就能判断出来。

这个模式的价值在于「尺度感」。平面图上的 3 米和身临其境的 3 米完全不是一回事——沙发和电视柜之间会不会太挤、餐桌拉开椅子之后过道还剩多少，只有走进去才知道。

floorplan-3d 的第一人称漫游模式 — 漫游模式实测画面。相机在客厅里，朝休闲阳台方向。顶部提示条列出当前可用按键：WASD 移动、鼠标转向、Shift 快走、E 开关门、Esc 暂停。沙发、茶几、边柜的尺寸比例和平面图上标注的 2400/1300 毫米能对上。

六、默认户型：13 个房间，套内 87.18 ㎡

默认方案是一套三室两厅两卫，13 个房间、套内使用面积 87.18 ㎡。面积不是估的，是把每个房间的多边形顶点做鞋带公式算出来的，右侧面板逐条列出。

其中客厅 21.53 ㎡最大，主卧室 12.37 ㎡、子女房 10.89 ㎡、小孩房 9.30 ㎡依次往下，客卫浴 2.89 ㎡最小。两个飘窗（主卧 1.41 ㎡、子女房 1.17 ㎡）在源码里被显式标记为不计入套内，所以面板上是单独列出来并打了星号的——这个处理挺讲究，很多人算面积时会含糊过去。

全屋地面材料合计 ¥25,077，已经按各房间不同材料分别计算并加了 5% 损耗。要提醒一句：这只是地面材料的钱，不含人工、辅料、墙顶面和拆改，别拿这个数字当作装修预算。

默认户型的房间面积与地面材料单价 — 左边是 13 个房间的面积，灰色两条是飘窗（不计入套内）；右边是内置的 8 种地面材料单价。默认方案里卧室用橡木地板、客厅餐厅用过道 800 地砖、卫生间和厨房用 300 防滑砖、阳台用胡桃木地板、飘窗用大理石，合计 ¥25,077。

七、技术实现：2675 行，零构建

这是这个项目最值得说的部分。整个应用就是一个 index.html：2675 行、176,450 个字符、185,528 字节。拆开看，其中 CSS 约 1.4 万字符，两个主 <script> 块合计约 15.5 万字符，里面包含 125 个具名函数声明和 99 个箭头函数。

技术选型非常克制：

原生 HTML / CSS / JavaScript，没有框架、没有打包器、没有 node_modules，克隆下来就能跑
2D 平面图用 SVG 画——所以缩放不糊，墙体、门窗、家具都是矢量图形
3D 场景用 Three.js r160，通过 importmap 从 jsDelivr 引入，一共只引了 6 个模块：核心 THREE，加上 OrbitControls、PointerLockControls（第一人称）、RoundedBoxGeometry（圆角家具）、RoomEnvironment（环境光照）、CSS2DRenderer（房间里那些随时跟着转的文字标签）
数据存在 localStorage，键名 huxing-design-v1，每次改动自动落盘，语言偏好另存 huxing-lang

渲染上用了 ACESFilmic 色调映射和 PCFSoft 软阴影，环境反射靠 RoomEnvironment 生成的贴图——这就是为什么家具看起来不像塑料块。3D 里满屋跑的文字标签用的是 CSS2DRenderer，等于用 HTML 元素做标注，省掉了一整套贴图字体。

八、怎么换成你自己的户型

这是 issue 区问得最多的问题，答案不复杂但得动手：户型数据全部以常量形式写在 index.html 里，改数据就能换户型。

常量	装的是什么
`ROOMS`	房间多边形顶点、名称、默认地面材料
`WALLS` / `WINS`	墙段与窗洞，格式 `[x0, y0, x1, y1]`
`DOORS` / `SLIDES`	平开门（含铰点、开启方向、门宽）与推拉门
`MATS`	地面材料名称与单价
`LIB`	家具库：类型、名称、默认尺寸、颜色
`buildFurniture()`	每一类家具的 3D 模型是怎么拼出来的

坐标系是毫米，整个户型的包围盒由 BOUNDS = {x:-1850, y:-1750, w:15600, h:14100} 定义，也就是 15.6 米 × 14.1 米的范围。墙段格式是 [x0, y0, x1, y1, 类型]，类型共四种：b 承重、e 外墙、n 可拆非承重、low 矮墙。

实际写法长这样（以下均摘自仓库源码）：

const ROOMS = [
  {id:'living', name:'客厅', poly:R(4820,6610,10270,10560), mat:'tile800', at:[7600,7560]},
  {id:'master', name:'主卧室', poly:R(6600,0,10270,3370),   mat:'wood',    at:[8435,2420]},
];

const WALLS = [
  [1580,-240,2120,0,'b'],      // 承重墙，不给拆
  [2120,-240,4580,0,'e'],      // 外墙
  [2180,7400,2420,7590,'n'],   // 非承重墙，可以拆
];

const MATS = {
  wood:   {name:'橡木地板', price:320, sw:'#d8b88a'},
  marble: {name:'大理石',   price:650, sw:'#f1eee8'},
};

poly 是这个房间的多边形顶点，at 是房间名标签的落点，mat 是默认地面材料的键名。R(x0,y0,x1,y1) 是个小工具函数，把矩形四个角转成顶点数组。看懂这三段，剩下的就是拿卷尺量自己家了。

默认户型一共 48 段墙（承重 17 段、外墙 14 段、可拆 16 段、矮墙 1 段，总长约 401.4 米）、12 条窗洞记录（其中 6 条是普通窗，6 条构成两个飘窗）、6 樘平开门加 2 樘推拉门。你要做的是拿自己家的尺寸，把这些数组重填一遍。

坦白讲，这仍然是「改代码」而不是「点几下」。issue #2 问的就是这件事，issue #3 更是直接建议作者加一个「导入户型图片自动识别」的功能——目前还没做。

九、社区在做什么

发布一周拿到 1495 星、301 次 fork，平均每 5 颗星就换来 1 次 fork，说明很多人不只是点个赞，是真的拉下来准备改。仓库一共 3 位贡献者，其中作者 wy51ai 提交 1 次，另一位 wuyi51 提交 7 次，还有一个 claude 的账号——几个 PR 都是通过 AI 辅助完成的。

四个 PR 里两个已合、两个还开着：PR #7 补上了繁体中文界面（+13 −7，已合入）；PR #4 想把简体直接改成繁体（+400 −400），没有合，最终以 #7 的方式落地；PR #8 要加「导入完整户型 + 原地改墙」（+317 −56），正好打在 issue #2 的痛点上，还在审；PR #9 补了一批手工家具和不锈钢厨房台面（+369 −6），也是开着。

issue 那边除了 #2「怎么改户型」和 #3「建议支持图片导入」，还有 #5 在问坐标轴方向说明——都是同一种反馈：这个工具很好用，但换户型这一步门槛还在。

floorplan-3d 的社区数据与时间线 — 发布一周的社区数据：1495 星、301 次 fork、6 个未关 issue、4 个 PR。时间线按仓库实际提交与 PR 记录整理，PR 的增删行数来自 GitHub API。

十、几个需要提前知道的问题

只有一套默认户型。想改成自己家必须动源码（见上一节），目前没有界面入口。这也是社区最集中的诉求。
3D 依赖 CDN。Three.js 从 jsDelivr 加载，断网或者 CDN 被墙时 3D 场景打不开，2D 部分不受影响。
方案存在浏览器本地。换电脑、换浏览器、清缓存都会丢。重要方案一定要用「文件 → 导出方案 JSON」存一份。
拆墙只是显示层面的操作。它不会、也不可能判断结构安全。哪面墙能动必须问物业和专业结构工程师，别拿这个工具当依据。
造价只是地面材料。¥25,077 这个数字不含人工、辅料、墙面顶面、水电、拆改，离真正的装修报价差得很远。
尺寸靠手填。坐标要你自己量、自己输，没有从图片或户型图自动识别的能力。

十一、怎么上手

三种方式，按省事程度排：

直接打开在线版：https://wy51ai.github.io/floorplan-3d/，仓库已经开启 GitHub Pages，什么都不用装。
下载到本地：git clone https://github.com/wy51ai/floorplan-3d，然后用浏览器打开 index.html。因为全是相对路径，直接双击就能跑。
起个本地服务（想改代码的话更顺手）：python3 -m http.server 8000，然后访问 http://localhost:8000。

上手最该记的几个快捷键：T 在 2D / 3D 之间切；V / M / X 分别是选择、测量、拆墙三个模式；R 和 Shift+R 让选中的家具顺时针 / 逆时针转 90°；Ctrl+D 复制、Delete 删除；Ctrl+Z 和 Ctrl+Shift+Z 撤销重做；F 适应窗口；[ 和 ] 收起左右面板——屏幕小的时候这两个键很有用。

总结：适合谁，不适合谁

把它和另外两种常见路线放在一起比，定位就很清楚了：

	floorplan-3d	桌面室内设计软件	云端在线设计平台
装什么	什么都不用装，一个 HTML 文件	要安装客户端	不用装，但要注册登录
数据在哪	你自己的浏览器本地，可导出 JSON 带走	本地工程文件	云端账号里
要不要联网	2D 完全离线；3D 首次需从 CDN 拉 Three.js	不需要	全程需要
换成自家户型	改源码里的数据常量	一般有界面入口，但要先学	一般有界面入口
能改代码吗	能，MIT 协议，随便改随便分发	不能	不能
能做到什么程度	摆家具、看效果、估地面材料钱	可出施工图	可出效果图、对接主材库

所以它的位置其实是「第三条路」：不如商用平台好看、不如专业软件能出图，但它是唯一一个你能打开源码、看清楚每一行在干什么、然后按自己需要改掉的东西。

适合：正在装修、想自己先摆一版看看的人；想给业主快速看个效果的设计师；以及所有想找一个「单文件、能读懂、能改」的 Three.js 实战项目的前端。

不适合：要出施工图的；要精确到毫米做定制柜的；想从一张户型照片自动生成 3D 的；以及任何打算拿它当结构安全依据的。

它最聪明的地方是把工程边界划得很清楚——不追求做 CAD，不追求做渲染器，只把「摆家具 + 看效果 + 估个地面材料钱」这件事做到能在浏览器里单文件跑起来。2675 行、一个 HTML、零构建，这个体量本身就值得一看。

来源与说明

本文数据来源：仓库 wy51ai/floorplan-3d 的 index.html 源码（行数、字符数、函数数量、家具库构成、墙体 / 窗洞 / 门 / 房间 / 材料常量均由脚本从源码中逐项提取）；GitHub REST API（star、fork、issue、PR 的增删行数与状态，截至 2026-10-07）。

本文的 2D 与 3D 界面截图，均为作者在 Chrome 中以 1600×1000 视口实际操作 https://wy51ai.github.io/floorplan-3d/ 后截取，未做内容修改。四张数据图由作者依据上述源码实测数据绘制。封面为 AI 生成的示意插画，非软件真实界面。

项目采用 MIT 许可协议，可自由使用与修改。

文章版权归作者所有，未经允许请勿转载。

THE END