floorplan-3d 方案管理与造价估算面积自动统计、地面材料预算、JSON 导入导出、PNG 一键导出【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d 是一款纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体一键切换 Three.js 3D 漫游。除了画图它还是一套轻量的方案管理与造价估算工具——房间面积自动统计、地面材料预算按损耗实时估算、方案 JSON 一键导入导出、效果图 PNG 一键导出。无需构建、无需服务器打开即用。 一、面积自动统计打开面板数据就有了无需手动量尺寸。工具基于内置户型数据用多边形面积算法自动计算每个房间房间面积按墙体内净尺寸计算精度保留到小数点后两位实现见 index.html套内使用面积汇总所有计入房间顶栏实时显示例如套内使用面积约 XX m² · 原图比例 1:60index.html飘窗不计入使用面积counted: false的房间在列表中标*号符合常见计价习惯index.html右侧面板的房间面积表格列出每个房间的面积点击任意一行还能直接飞到该房间2D 高亮 / 3D 视角飞移 面板代码位置index.html 二、地面材料预算换个地板造价立刻变每个房间可以单独更换地面材料内置8 种常用地面材料及参考价元/㎡材料单价元/㎡适用场景示例300 防滑砖140卫浴、阳台600 地砖160厨房满铺地毯200儿童房800 地砖220客厅、餐厅水磨石280现代风格橡木地板320卧室胡桃木地板380休闲阳台大理石650飘窗台面材料定义在 index.html 的MATS中。造价怎么算面板地面材料估算会按材料分组汇总该材料总面积 × 单价 × 1.05含 5% 损耗也就是说你把客厅地板从 800 地砖换成大理石所有同类材料的面积会重新归组合计金额实时刷新不用自己开计算器。计算逻辑见 index.html。⚠️ 预算为估算参考含 5% 施工损耗实际采购请以市场价和施工队报价为准。 三、方案 JSON 导入导出设计方案可存档、可分享整个设计方案家具摆放、房间地面材料、拆改墙体、测量线都保存在一个state对象里随时可以导出一键导出方案 JSON顶栏「文件 → 导出 JSON」会下载一个户型装修方案.json内容是完整格式的 JSON 数据index.html。适合备份当前方案防止浏览器清缓存分享给设计师或家人继续修改对比多套设计方案一键导入方案 JSON「文件 → 导入 JSON」选择之前导出的文件即可恢复方案。导入前会校验文件结构格式不正确会提示文件格式不正确不会弄坏当前方案导入成功后仍可Ctrl/⌘ Z撤销index.html。浏览器本地自动保存不用手动保存每次改动都会自动写入浏览器 localStorage键名huxing-design-v1下次打开自动恢复现场index.html。配合 150 步撤销/重做栈操作非常安心。注意localStorage 按浏览器 域名隔离。换电脑或换浏览器时请用 JSON 导出/导入迁移方案。️ 四、PNG 一键导出2D 平面图 / 3D 效果图都能存「文件 → 导出 PNG」的行为随当前视图智能切换2D 模式克隆整张 SVG 平面图以3200px 宽度重绘到 canvas 再下载输出高清大图方便插入文档或打印index.html3D 模式直接截取当前 3D 视角画面含鸟瞰、斜视、漫游画面保存为户型装修方案-3D.pngindex.html导出的图片不含选中框、临时光标等编辑辅助元素是干净的成品图。 五、快速开始1 分钟上手git clone https://gitcode.com/gh_mirrors/fl/floorplan-3d cd floorplan-3d然后直接用浏览器打开 index.html 即可也可以起一个本地静态服务器python3 -m http.server 8000 # 访问 http://localhost:8000Three.js 通过 CDN 加载首次打开 3D 场景需要联网2D 功能与面积/造价统计完全离线可用。 六、相关文件速查内容位置项目说明与功能清单README.md户型 / 墙体 / 家具库数据index.html地面材料单价表index.html面积与造价统计面板index.htmlJSON 导入导出与 PNG 导出index.html快捷键说明README.md想换成自己的户型只需修改 index.html 中的ROOMS、WALLS、MATS、LIB等数据即可面积统计与造价估算会自动适配新户型。小结floorplan-3d 用不到 3000 行代码实现了一个完整的方案管理闭环——画2D/3D 编辑→ 算面积 地面预算→ 存localStorage JSON→ 发PNG 导出对装修前期沟通和预算摸底非常实用。【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考