Floorplan-3D Vibe 项目

项目简介

Floorplan-3D 是一款完全基于前端技术栈打造的户型装修设计工具，整个应用就是一个 index.html 文件，无需任何构建步骤，浏览器双击即可打开使用。它把 2D 平面布置与 Three.js 3D 可视化整合在同一界面：左侧是家具库，中间是 SVG 绘制的 2D 平面图，按 T 一键切换到鸟瞰、斜视、第一人称漫游三种 3D 视角。无论是自住业主规划家具摆放，还是装修从业者快速出 demo 给客户看，都能直接落到一个本地文件上完成。

核心功能

• 2D 平面布置：以 1:60 / 1:100 原始户型比例显示，尺寸单位 mm。从左侧家具库拖入 60 余种家具家电（卧室、客厅、餐厨、卫浴、家电、书房休闲），拖动 / 旋转 / 缩放 / 贴墙吸附全自动。
• 拆改墙体与图层管理：拆改非承重墙，承重墙单独高亮标示；尺寸标注、房间名、家具、网格、承重墙等图层可独立开关。
• 测量工具：靠近墙面自动吸附，按住 Shift 锁定水平 / 垂直，毫米精度可量。
• 3D 多视角与日照模拟：鸟瞰 / 斜视 / 俯视三种视角，点击房间名即可"飞"到对应房间；漫游模式支持桌面端 WASD + 鼠标 / 触屏虚拟摇杆；日照时间滑块可调，全高墙 / 剖切墙可切换。
• 方案统计与造价估算：房间面积、套内使用面积自动统计；地面材料（木地板、地砖、大理石、水磨石、地毯等）按面积加 5% 损耗估算造价。
• 导出 / 导入与本地存档：支持导出 PNG 图片和整套方案 JSON；方案自动保存在浏览器 localStorage，撤销 / 重做无次数限制。

技术实现

整个项目坚持极简原则：原生 HTML / CSS / JavaScript，无任何框架、无构建步骤——这是它能装进单个 index.html 的根本原因。2D 平面图用 SVG 绘制，3D 场景用 Three.js r160（OrbitControls、PointerLockControls、RoundedBoxGeometry、RoomEnvironment、CSS2DRenderer）通过 jsDelivr CDN 加载。所有数据都写在 index.html 顶部的常量中：ROOMS 是房间多边形、名称、默认地面材料；WALLS / WINS 是墙体与窗洞；MATS 是地面材料名称与单价；LIB 是 60 余种家具的类型、名称、默认尺寸、颜色；buildFurniture() 函数用纯代码拼出每种家具的 3D 模型（柜门分缝、拉手、软包床头、带环境反射的金属与陶瓷材质都手工建模）。改这几个常量就能换成自家户型。这是典型 Vibe Coding 风格：不引框架、不做抽象，把每一行都摆在用户能看见的位置。

快速上手

1. git clone https://github.com/wy51ai/floorplan-3d.git
2. 进入仓库目录，直接双击 index.html 即可使用（Three.js 走 CDN，首次进入 3D 场景需联网）。
3. 如需本地服务器：python3 -m http.server 8000，浏览器访问 http://localhost:8000。
4. 在左侧家具库挑选家具拖入 2D 平面图，按 T 切换到 3D 视图，按住右键使用 WASD 在场景中漫游；按 Ctrl/⌘ + Z 撤销、Ctrl/⌘ + Shift + Z 重做。

适用人群

• 想在新房交付前自己先排一遍家具的业主
• 装修设计师需要快速出方案 demo、给客户看空间感
• Three.js / Web 3D 学习者想看一个完整但简洁的项目范例
• 喜欢 Vibe Coding 风格、追求"零依赖、单文件"的独立开发者