Floorplan 3D 是一款开源的网页户型设计工具，可以在二维平面图中布置家具、测量尺寸和调整墙体，再切换到3D视角查看实际空间效果。
阿喵前言
沙发、床和餐桌单独看着都不大，搬进家里却可能挡住通道。只看二维户型图，也很难判断家具摆完后会不会显得拥挤。
Floorplan 3D 可以先把家具放进户型中试摆，再进入3D场景走一圈。虽然操作方式不如专业装修软件完整，但用于装修前验证布局已经很方便。
资源介绍
Floorplan 3D 是一个纯前端户型装修工具，整个项目只有一个 index.html，直接使用浏览器就能打开。
工具内置60多种家具和家电，涵盖卧室、客厅、餐厨、卫浴及书房。家具的位置、角度和尺寸均可调整，还支持贴墙吸附、距离测量及非承重墙拆改。
完成平面布置后，可以切换到鸟瞰、斜视或第一人称漫游模式。二维和三维场景会实时同步，在3D视图中也能直接移动家具。
截图
特色
- 内置60多种家具和家电
- 支持移动、旋转及修改尺寸
- 提供贴墙吸附和测量工具
- 支持标记及拆改非承重墙
- 一键切换2D与3D视图
- 支持鸟瞰和第一人称漫游
- 自动统计房间及套内面积
- 可更换地面材料并估算费用
- 支持撤销、重做及本地保存
- 可导出PNG图片和方案JSON
注意
- 目前不能上传户型图自动生成3D房间
- 自定义户型需要修改
index.html中的房间、墙体和窗户数据 - 修改源码需要具备一点HTML和JavaScript基础
- 家具模型、尺寸和材料费用只能作为布局参考
- 承重墙及实际施工方案应交给专业人员确认
- 方案保存在浏览器本地，清理浏览器数据前记得导出JSON
- Three.js通过CDN加载，首次进入3D场景需要联网
教程
- 打开 Floorplan 3D在线版。
- 从左侧家具库拖入沙发、床、餐桌等物品。
- 选中家具，调整位置、方向和具体尺寸。
- 使用测量工具检查通道和家具间距。
- 按下
T键切换到3D场景。 - 在漫游模式中使用
WASD或方向键移动，按E开关房门。 - 方案确认后，可以导出PNG图片或JSON文件备份。
如果要换成自己家的户型，需要从GitHub仓库下载项目，然后修改 index.html 中的以下数据：
ROOMS：房间轮廓、名称和地面材料WALLS：墙体位置与尺寸WINS：窗户及洞口MATS：地面材料和单价LIB：家具名称、尺寸和颜色
这个工具太实用了，正好要装修，先摆一下家具看看效果，省得买回来不合适。