Github上一个非常棒的户型装修设计软件,全开源,1个单文件实现。作者用Opus 5.5的3D建模能力和理解能力真的强的可怕,我花了一个小时就实现了这个小项目。
项目地址:https://github.com/wy51ai/floorplan-3d
演示地址:https://www.cpw5.top/wp-content/uploads/floorplan.html

户型装修设计
纯前端的户型装修设计工具:在 2D 平面图上摆放家具、拆改墙体、测量尺寸,一键切换到 Three.js 3D 场景,可以鸟瞰,也可以第一人称漫游。整个应用就是一个 index.html,无需构建,打开即用。
功能
2D 平面布置
- 按原始户型 1:60 / 1:100 比例显示,尺寸单位 mm
- 从左侧家具库拖入 60 余种家具家电(卧室、客厅、餐厨、卫浴、家电、书房休闲)
- 拖动移动、旋转(Shift 自由角度)、调整尺寸,贴墙自动吸附
- 测量工具(靠近墙面自动吸附,Shift 锁定水平 / 垂直)
- 拆改非承重墙,承重墙单独标示
- 图层开关:尺寸标注、房间名、家具、网格、承重墙
3D 场景
- 鸟瞰、斜视、俯视多种视角,点击房间列表可飞到对应房间
- 漫游模式:桌面端 WASD + 鼠标,触屏设备用虚拟摇杆,可以点门开关
- 全高墙 / 剖切墙切换,日照时间滑块,夜景灯光
- 精细家具模型:柜门分缝与拉手、软包床头、带环境反射的金属与陶瓷材质等
- 在 3D 中也能选中、拖动家具,与 2D 方案实时同步
方案与统计
- 房间面积与套内使用面积自动统计
- 为每个房间更换地面材料(木地板、地砖、大理石、水磨石、地毯等),按面积加 5% 损耗估算造价
- 撤销 / 重做,方案自动保存在浏览器本地
- 中文 / English 界面切换(顶栏右侧按钮,默认中文,选择会记住)
- 导出 PNG 图片,导出 / 导入方案 JSON