Floorplan 3D：单文件家居设计工具
探索一款基于浏览器的平面图设计工具：将精准的 2D 家具布局与交互式 Three.js 漫游体验结合起来，全部集成在一个 HTML 文件中。
在 2D 中规划房间很快捷，但很难判断站在房间里时布局是否合适。floorplan-3d 通过一款基于浏览器的家居设计工具弥合了这一差距：先在 2D 中布置平面图、修改墙体并测量尺寸，再切换到交互式 Three.js 场景，从上方查看设计效果或在其中漫游。
这个项目非常容易上手。整个应用只有一个 index.html 文件，使用原生 HTML、CSS 和 JavaScript 构建，无需框架或构建流程。克隆仓库后，在浏览器中打开该文件即可；不需要安装任何软件包。唯一的主要例外是 3D 引擎：它会从 jsDelivr 加载 Three.js r160，因此首次打开 3D 视图时需要连接互联网。
从尺寸精确的平面图到可探索的房间
2D 编辑器面向实用的布局工作，而不仅仅是绘制草图。它按 1:60 或 1:100 的比例显示平面图，并以毫米为单位标注尺寸。家具库包含 60 多种家具和电器，涵盖卧室、客厅、厨房与餐厅、浴室、家用电器以及书房或休闲空间。将物品拖到平面图上，即可移动、调整尺寸或旋转；按住 Shift 键还可自由旋转角度。家具也可以自动吸附到墙面。
测量工具可以直接在平面图上检查通行间距和墙体长度。它能吸附到墙体附近，按住 Shift 键则可将测量方向限制为水平或垂直。规划翻新时，可以标记要拆除的非承重墙，并单独标识承重墙。通过可见性控制，可以按需隐藏或显示尺寸、房间名称、家具、网格和承重墙。
这一区别很重要：编辑器可以帮助直观呈现拟议的改动，但绘图工具并不等于结构评估。请将拆墙标记视为设计注释，并在进行结构改造前咨询合格的专业人士。
在交互式 3D 中检查设计
按 T 可在 2D 平面图和 3D 场景之间切换。3D 视图提供鸟瞰、倾斜和俯视视角。你还可以从列表中选择房间，让摄像机飞向该房间。若想更沉浸地检查空间，漫游模式支持桌面端的 WASD 和鼠标控制，也支持触屏设备上的虚拟摇杆。探索时还可以开关门。
这个场景不只是粗略的方块模型。项目提供了精细的家具模型，包括柜门接缝和把手、软包床头板，以及具有反射效果的金属和陶瓷材质。你也可以在 3D 中选中并移动家具，改动会同步回 2D 布局。墙体显示方式可以在全高和剖切视图之间切换；阳光时段滑块和夜间照明则有助于查看空间在不同条件下的效果。
比较材质并记录更改
应用会自动计算各房间面积和室内可用总面积。每个房间都可以指定地面饰面，包括木地板、瓷砖、大理石、水磨石和地毯。材料估算会按房间面积再加上 5% 的损耗余量，为粗略预算提供实用的起点。
编辑器支持撤销和重做，并会自动将平面图保存到浏览器的 localStorage 中。你可以导出 PNG 图片用于分享，也可以将完整平面图导出为 JSON 或从 JSON 导入。界面支持中文和英文；语言切换按钮位于右上角，且会记住你的选择。
由于 localStorage 的数据仅保存在当前浏览器中，因此不能替代可移植的备份。如果你想将设计迁移到另一款浏览器，或在当前浏览器配置文件之外保留副本，请导出 JSON。
开始使用
克隆仓库，然后直接打开 index.html，或运行一个简单的静态服务器：
git clone <repository-url>
cd <repository-directory>
python3 -m http.server 8000
在浏览器中访问 http://localhost:8000。服务器并非必需，但使用服务器可以让不同浏览器对本地文件的处理更加一致。2D 编辑器无需构建步骤即可使用；首次打开 3D 视图时，需要联网从 jsDelivr 获取 Three.js。
常用键盘快捷键
| 按键 | 操作 |
|---|---|
T |
在 2D 和 3D 之间切换 |
V / M / X |
选择、测量或标记要修改的墙体 |
R / Shift+R |
将选中的家具顺时针或逆时针旋转 90° |
Delete / Backspace |
删除选中的家具 |
Ctrl/⌘ + D |
复制选中的家具 |
Ctrl/⌘ + Z / Ctrl/⌘ + Shift + Z |
撤销 / 重做 |
F |
将平面图调整至适合窗口的大小 |
+ / - |
放大 / 缩小 |
[ / ] |
折叠或展开侧边栏 |
Shift + F |
切换全屏模式 |
Esc |
取消当前操作 |
在漫游模式中，使用 WASD 或方向键移动，按 Shift 加快行走速度，按 E 操作门。
根据其他平面图进行调整
项目将设计数据保存在 index.html 中，因此开发者可以轻松修改这款示例工具。主要数据结构包括：用于定义房间多边形、名称和默认地面材质的 ROOMS；用于定义墙体和窗户开口的 WALLS 与 WINS；用于定义材质名称和价格的 MATS；以及用于定义家具类型、标签、默认尺寸和颜色的 LIB。buildFurniture() 函数则负责构建相应的 3D 模型。
要用于定制住宅，请更新这些定义，使其符合所需的几何结构和材质，然后根据需要调整家具条目或模型构建逻辑。对于小型自包含工具而言，将平面图数据与渲染代码放在一起很方便；不过，规模更大的应用通常会受益于将数据、渲染和界面逻辑拆分为不同模块。
floorplan-3d 采用 MIT 许可证发布，既是一款实用的规划工具，也是一个精巧的示例，展示了无需构建步骤的 Web 应用如何将基于 SVG 的 2D 编辑与 Three.js 室内视图结合起来。仓库显示有 3.7k 个星标和 778 个复刻，且根据语言统计，其实现完全使用 HTML。对开发者来说，它的吸引力显而易见：克隆项目后即可立即试排布局，还能看看一个文件如何支持出人意料地完整的设计流程。