兄弟们，今天又被一个项目惊艳到了。 打开一个网页，左边拖家具、改墙、量尺寸，右边直接切到 Three.js 3D 场景，鸟瞰、第一人称漫游随便切。而且整个项目就一个 index.html ，不需要构建，不需要装依赖，打开即用。 项目叫 Floorplan 3D ，作者 wy51ai，目前 GitHub 已经 2900+ Star，还挂着 Made with AI 的标签。 在线体验： https://wy51ai.github.io/floorplan-3d 源码： https://github.com/ […]

兄弟们，今天又被一个项目惊艳到了。

打开一个网页，左边拖家具、改墙、量尺寸，右边直接切到 Three.js 3D 场景，鸟瞰、第一人称漫游随便切。而且整个项目就一个 index.html，不需要构建，不需要装依赖，打开即用。

项目叫 Floorplan 3D，作者 wy51ai，目前 GitHub 已经 2900+ Star，还挂着 “Made with AI” 的标签。

在线体验：

https://wy51ai.github.io/floorplan-3d

源码：
https://github.com/wy51ai/floorplan-3d

这个工具到底能干什么？

2D 平面布置（核心操作区）

• 按真实户型比例显示（1:60 / 1:100），尺寸单位是 mm
• 左侧家具库有 60 多种家具家电（卧室、客厅、餐厨、卫浴、书房全覆盖）
• 拖进去就能摆，支持旋转（按住 Shift 自由角度）、缩放，贴墙自动吸附
• 测量工具很智能，靠近墙面会自动吸附，Shift 锁定水平/垂直
• 能拆改非承重墙（承重墙单独标示，防止你乱拆）
• 图层开关齐全：尺寸标注、房间名、家具、网格、承重墙随便隐藏

3D 场景（一键切换）

• 鸟瞰、斜视、俯视多种视角，点房间列表还能直接飞过去
• 漫游模式：桌面 WASD + 鼠标，手机用虚拟摇杆，门还能点开关
• 支持全高墙 / 剖切墙切换，还有日照时间滑块和夜景灯光
• 家具模型细节到位：柜门有分缝和拉手，床头有软包，金属和陶瓷有环境反射
• 更离谱的是——在 3D 里也能直接选中和拖动家具，2D 和 3D 实时同步

方案管理

• 自动计算每个房间面积 + 套内使用面积
• 可以给每个房间换地面材料（木地板、地砖、大理石等），还按面积加 5% 损耗估算造价
• 撤销/重做、自动本地保存、导出 PNG、导入导出 JSON 方案

技术上有多干净？

• 纯原生 HTML + CSS + JavaScript，没有 React、没有 Vue、没有构建工具
• 2D 用 SVG 画
• 3D 用 Three.js r160（OrbitControls、PointerLockControls、RoomEnvironment 都用上了）
• 数据全部存在 localStorage
• 整个应用就一个 index.html 文件

作者把户型数据、家具库、3D 模型构建逻辑都写在这个文件里了。想换自己的户型？直接改 ROOMS、WALLS、LIB 和 buildFurniture() 就行。

这波操作真的很符合现在的 vibe coding 趋势——AI 帮忙把复杂的 3D 场景和交互逻辑写出来，人类负责把产品打磨到“打开就能用”的程度。

怎么上手？

最简单的方式：

1. 直接打开在线地址玩：https://wy51ai.github.io/floorplan-3d/
2. 或者克隆仓库后，用浏览器打开 index.html（建议起个本地服务器，避免跨域问题）

git clone https://github.com/wy51ai/floorplan-3d.git
cd floorplan-3d
python3 -m http.server 8000

然后访问 http://localhost:8000 就行。

常用快捷键也整理得很全：T 切换 2D/3D，V/M/X 切换选择/测量/拆墙，R 旋转家具，Ctrl+Z 撤销……基本用起来很顺手。

最后

现在很多 AI 生成的 3D 项目要么是 demo 级，要么一堆依赖配置起来头疼。这个项目直接把“能用的产品感”做到了极致——单文件、零构建、功能完整、细节到位。

尤其是 2D 和 3D 实时同步 + 漫游模式，玩起来已经有点像简易版酷家乐的感觉了。

如果你最近也在用 AI 写 Three.js，或者想找一个干净的纯前端 3D 案例学习，强烈建议 Star 收藏一下。

去玩玩看吧，说不定下次你装修房子，就直接用这个出方案了（认真脸）。

本文完！

说点什么吧

• 全部评论（0）
• 最新 最早

还没有评论，快来抢沙发吧！