装修前想自己摆一摆家具，这件事的尴尬之处在于：纸笔量不准，专业软件装不动，在线工具又往往停在“看效果图”的层面。沙发塞不塞得进客厅、床和衣柜会不会打架、非承重墙能不能拆，这些判断需要的不是一个好看的渲染，而是一个能快速试错、改完立刻看到结果的工具。

floorplan-3d 给出的答案有些特别：整个应用就是一个 185 KB 的 index.html，没有构建步骤，没有 npm 依赖树，克隆下来双击打开，就已经是一套可用的设计器。2D 平面用 SVG 绘制，3D 场景用 Three.js r160 通过 CDN 加载，数据存在浏览器的 localStorage 里。它不试图替代 SketchUp 或 Sweet Home 3D，而是把“打开即用”这件事推到了一个接近极限的位置。

核心不在功能列表，在“单文件”背后的架构克制

单文件很容易被误解为“小打小闹”。但 floorplan-3d 的功能密度并不低：1:60 / 1:100 毫米级平面图、60 余种家具拖拽与贴墙吸附、非承重墙拆改、尺寸测量、面积与造价统计，以及一键切换的 3D 鸟瞰和第一人称漫游。把这些塞进一个文件而不失控，靠的是三条相当明确的设计选择。

第一，2D 和 3D 不是两个画布，而是同一套状态的两种投影。系统里只有一个精简的核心状态树，2D 的 SVG 交互和 3D 的 Three.js 管线都围绕它运转。你在 3D 里拖动一件家具，2D 平面图同步更新；在 2D 里旋转一个柜子，3D 场景里它也在转。切换视图时，通过一套视口对齐逆解与生长插值逻辑，让相机和几何体在同一个世界坐标系下完成“升维”或“降维”，而不是重新加载一个独立的场景。这种同步不是功能列表上的一句话，而是整个架构的地基。

第二，家具 3D 模型不靠外部资源，靠代码生成。项目没有堆积 glTF 或 OBJ 模型文件，buildFurniture()函数用纯代码拼出每一种家具：柜门的板缝、拉手的圆柱、软包床头的圆角、金属与陶瓷材质的环境反射，都是在 Three.js 的RoundedBoxGeometry和RoomEnvironment之上程序化构建的。这意味着整个应用不依赖任何外部模型资产，一个 HTML 文件就是完整的交付物。

第三，2D 的 CAD 交互不引入 Fabric.js 或 Konva 这类重型 Canvas 库，而是直接用原生 SVG DOM 和数学矩阵完成。毫米坐标到屏幕像素的映射通过viewBox和分组transform硬加速，家具在任意旋转角度下的贴墙吸附，用旋转包围盒（AABB）半宽半高计算配合墙面投影来完成。代码行数是可控的，行为是可预测的，没有一层框架在中间替你“猜”交互。

3D 场景的“可用性”来自几个不起眼但关键的选择

很多浏览器端 3D 户型工具的问题不在于模型不漂亮，而在于“进去之后不知道能做什么”。floorplan-3d 在漫游层面的处理更接近一个小型游戏引擎的思路：

桌面端 PointerLockControls + WASD，触屏端虚拟摇杆，门可以点开，带动态碰撞；

全高墙与剖切墙切换，剖切状态下俯视或斜视能直接看清内部布局，不需要把墙一堵一堵隐藏；

日照时间滑块在 Three.js 的方向光与阴影体系上直接调节，夜景灯光有独立的状态；

点击房间列表“飞”到对应房间，在鸟瞰和第一人称之间有一条低成本的导航路径。

这些功能单独看都不复杂，组合在一起解决的是一个具体问题：在浏览器里判断一个空间“走起来舒不舒服”。能调光、能剖墙、能开门、能飞房间，判断的粒度就从“看起来怎么样”推到了“住起来大概是什么感觉”。

面积统计与造价估算：一个务实但不越界的附加层

工具自动统计房间面积与套内使用面积，每个房间的地面材料（木地板、地砖、大理石、水磨石、地毯等）按面积加 5% 损耗估算造价。这不是一个精算工具，它没有把辅料、人工、地域差价纳入模型，但它给出的数字在“快速比选方案”的语境下是成立的：换一种地面材料，造价量级的变化立刻可见。对于业主做初步预算、设计师给客户报一个大致区间，这个粒度足够，又不会制造“精确”的错觉。

技术栈的“反潮流”，恰恰是它最诚实的部分

在 Vite + React + 一堆状态库已经成为默认起手式的今天，floorplan-3d 的原生 HTML/CSS/JavaScript 显得有些不合时宜。但结合它的目标场景来看，这个选择是自洽的：它要解决的是“零安装、零构建、单文件交付”的问题，而不是“如何搭建一个可长期协作的前端工程”。在这个约束下，引入构建流水线本身就是矛盾的。Three.js 走 CDN、SVG 直接操作 DOM、状态用一个对象管到底，每一层都在减少“打开一个 HTML 之前需要发生的事”。

当然，代价也需要说清楚：它不是一个多人协作的设计平台，没有云端同步，没有版本管理，所有数据停留在浏览器的 localStorage 里。自定义户型需要直接修改index.html顶部的ROOMS、WALLS、LIB等常量。这既是它“不折腾”的一面，也是它“不面向所有人”的一面。它是一个把某一种交付形态做到极致的样本，不是一个试图覆盖所有工作流的全能工具。与 Sweet Home 3D 这类桌面端免费开源软件相比，它的优势不在功能广度，而在“打开一个 HTML 就能开始”的启动成本。

谁值得花时间打开它

如果你是新房的业主，想在正式装修前用半小时把家具粗略排一遍、看看动线和空间余量，它比纸笔和聊天记录靠谱得多。如果你是 Three.js 或 Web 3D 的学习者，它提供了一个完整但可读的单文件范例：2D/3D 状态同步、程序化建模、第一人称控制、贴墙吸附，都在一个 185 KB 的文件里，没有层层抽象包裹，每一行都摆在能被看见的位置。如果你是一个需要快速给客户展示空间感的设计从业者，导出一张 PNG 或一份 JSON 方案，成本几乎为零。

项目以 MIT 协议开源，仓库在 github.com/wy51ai/floorplan-3d ，在线版本可以直接在 wy51ai.github.io/floorplan-3d/ 打开试用。首次进入 3D 场景需要联网加载 Three.js CDN，其余交互完全跑在浏览器本地。