单个 HTML 实现 2D 户型秒变 3D 空间！爆火 GitHub 3000+ Star 的 Floorplan 3D 究竟有多惊艳？

“房子还没交房，甚至装修八字还没一撇，我已经拿它当模拟经营游戏玩得停不下来了！”近日，一款名为 Floorplan 3D 的开源前端项目在推特和 GitHub 上彻底破圈，斩获超过 3000 颗 Star，成为开发者、装修业主与室内设计师热议的焦点。

传统室内家装设计往往依赖庞大笨重的专业软件——从 AutoCAD 到 3ds Max，再到各类商业化云端渲染平台，不仅学习门槛极高，动辄还需要配置昂贵的硬件与订阅费用。而独立开发者 WY（@akokoi1） 带来的这个项目，彻底打破了空间建模的壁垒：无需任何编译打包构建流程，整个应用仅由一个 180KB 左右的 index.html 构成，直接在浏览器中双击即用，便能实现从 2D 平面绘制到 3D 真实漫游的平滑跨越！

一、从 2D 到 3D：极简却硬核的户型设计体验

Floorplan 3D 最让人惊叹的地方在于其“零门槛、极速响应”的用户体验。你不需要学习复杂的坐标系和建模指令，所有交互都在自然直觉中完成：

• 毫米级精准 2D 平面绘制：支持 1:60 与 1:100 专业建筑比例缩放，精确标注轴线尺寸。系统内置了 60 余种精致的模块化家具与家用电器组件（涵盖卧室、客厅、餐厨、卫浴、家电及书房休闲区），拖拽即放，并具备极为跟手的贴墙自动吸附与角度自由旋转（Shift 键）功能。
• 非承重墙拆改与结构感知：清晰区分承重墙与轻质隔墙，支持自由拆墙、移门、改窗，并配备精准的辅助对齐测量标尺。
• 自动算量与实时预算预估：系统会自动根据多边形算法汇总房间净面积与全屋套内使用面积，并支持为各房间自由铺设橡木地板、大理石、仿古砖、水磨石及地毯，自动按照 5% 施工损耗计算出详细的地面材料总造价！

二、一键降维升维：沉浸式 3D 场景与第一人称漫游

在 2D 视图中完成家具摆放后，只需按下键盘上的快捷键 T，或者点击顶栏的“3D 场景”，画面就会以丝滑的摄像机动画一键升维，将冷冰冰的线条平面转化为立体丰满的 3D 家居空间！

在 3D 模式下，Floorplan 3D 的表现力同样令人惊艳：

• 多重视角随心切换：支持鸟瞰全局全景、斜视透视、俯视剖切，点击房间列表即可平滑“飞”入对应功能区。
• 真实光影与日照轨迹模拟：顶栏提供日照时间滑块，拖动滑块即可模拟清晨 8:00 到傍晚 18:00 的自然太阳方位与投射阴影，甚至能一键开启温馨的“夜景模式”查看灯光漫射效果。
• 逼真的材质与细部质感：虽然模型轻量，但衣柜分缝与金属拉手、皮质/织物软包床头、带环境贴图（RoomEnvironment）的陶瓷卫浴与金属龙头光泽皆细腻呈现。
• FPS 级第一人称沉浸漫游：切换至漫游模式，桌面端通过经典的 WASD + 鼠标视角操作，支持走动、快跑（Shift），走到门前轻按 E 键即可推门入室，真正实现“在毛坯交付前先住进新家”的游戏级代入感！触屏设备更贴心配备了虚拟双摇杆。
• 双向数据实时联动：即便在 3D 场景下，你仍然可以直接拾取并移动家具，所做改动实时同步回 2D 户型图，双向数据完全一致。

三、完整操作演示视频

下面这段 30 秒的实机演示视频直观展现了从 2D 布局调整到 3D 视角无缝切换的全过程：

四、极客美学：纯原生技术栈带来的轻量化奇迹

在前端工程化动辄引入庞大 node_modules、Webpack/Vite 复杂管线的大环境下，Floorplan 3D 的技术底座堪称一股清流：

• 零构建（Zero Build）、单文件交付：整个项目的核心逻辑全部凝结在一个 index.html 中（仅 2000 余行代码）。没有 React、没有 Vue，没有繁琐依赖，原生 HTML5 + CSS + JavaScript 驱动。
• SVG + Three.js r160 混合渲染管线：2D 平面图采用原生 SVG 进行矢量高精度绘制，兼具锐利清晰度与极低内存占用；3D 场景则通过 jsDelivr 引入 Three.js r160，结合 OrbitControls、PointerLockControls、RoundedBoxGeometry 与 CSS2DRenderer 构建起丝滑的渲染管线。
• 本地优先与绝对隐私：方案数据直接保存在浏览器 localStorage 中，无需后端服务器，支持导出/导入标准化 JSON 文件与高清 PNG 方案图，用户的户型与私有隐私完全掌控在自己手中。
• AI 赋能的开发范式：作者 WY 透露，该项目的核心雏形是在 Claude Opus 5.5 的辅助下仅花费约一个小时便构思并落地完成的。这印证了现代前沿多模态大模型在空间几何理解、代码架构生成与 WebGL 复杂逻辑构建上的惊人威力。

五、对家装设计与数字地产的启发

Floorplan 3D 的火爆不仅是开源社区的一场技术狂欢，更向行业展示了空间交互工具平民化的巨大潜力：

• 租房党与毛坯房业主的“试错神器”：在现实中买家具往往存在“尺寸拿捏不准、颜色风格冲突”的痛点。通过 Floorplan 3D，租客和业主可以在几分钟内搭建起出租屋或新房格局，低成本反复验证各种动线与布局可能。
• 重塑房产营销与室内设计的沟通范式：传统房产销售给客户看的通常是静态彩平图或预渲染全景图，交互受限。若将此类极轻量、免安装的 3D 引擎集成至小程序或微信网页，购房者便能自由拖拽摆放自己的梦想家具，大大提升购房转化意向。

项目资源与体验入口
• 在线体验：https://wy51ai.github.io/floorplan-3d/
• GitHub 开源仓库：https://github.com/wy51ai/floorplan-3d（支持中英双语，MIT 开源协议）