户型设计工具的痛点
普通用户想要进行家庭户型改造和家具布置，通常需要依赖专业设计师或者复杂的商用软件。专业CAD工具学习门槛高，操作繁琐，普通用户短时间内无法上手。在线SAAS类工具大多需要付费订阅，导出高清方案或者解锁全家具库都需要开通会员，数据存储在第三方服务器，隐私性无法保证。
部分本地运行的户型设计工具体积庞大，安装包可达数GB，对电脑硬件配置要求高，很多老旧设备无法流畅运行。这类工具通常需要复杂的构建和环境配置，普通用户连安装步骤都无法完成，更不用说快速生成自己的户型方案。
用户需求往往只是简单预览家具摆放效果、估算装修材料成本，不需要专业级的施工图纸输出，过重的工具完全不符合轻量化使用的需求。这种轻量化需求和重型工具之间的落差，就是这个项目存在的核心价值。
项目概述
该项目是独立开发者维护的开源纯前端户型装修设计工具，核心定位为轻量化、零依赖、开箱即用的个人户型方案设计工具。项目采用MIT许可协议，允许个人和商业免费使用修改，没有版权风险。
整个项目仅包含单页HTML文件与基础资源，所有功能均可在前端完成，不需要后端服务支持，数据全部存储在用户本地浏览器中，不会上传到任何外部服务器。
技术架构深度分析
该项目技术选型走极简路线，全程使用原生HTML、CSS与JavaScript开发，没有引入第三方前端框架，也不需要任何构建打包步骤。这种设计的优势在于彻底降低了部署门槛，用户下载源码后直接用浏览器打开就能运行，不需要安装Node.js，不需要执行npm install，也不需要处理各种依赖版本冲突问题。对于普通用户来说，这几乎是零成本的上手体验。
核心渲染分为两个独立模块，2D平面部分采用SVG绘制，相比Canvas方案，SVG天生支持矢量缩放，放大缩小不会出现模糊，而且DOM节点可以直接绑定事件，交互逻辑编写更简单，不需要额外处理坐标映射。对于户型图这种以线条和多边形为主的场景，SVG的性能完全足够，不需要动用GPU加速，老旧设备也能流畅运行。
3D场景部分基于Three.js r160开发，所有Three.js依赖均通过CDN加载，不需要打包进项目文件，有效控制了项目整体体积。项目中用到了Three.js官方的OrbitControls实现多视角旋转鸟瞰，用PointerLockControls实现第一人称漫游，针对3D模型的细节做了多方面优化，比如添加圆角墙体几何、房间环境贴图、CSS2D标签渲染，平衡了视觉效果和运行性能。
数据存储层面采用浏览器localStorage存储方案，用户每次修改方案都会自动保存，关闭浏览器再重新打开，之前的方案不会丢失。自定义户型直接修改index.html中的配置常量即可完成，不需要额外的数据库或者后端接口，修改完成后刷新浏览器就能看到效果，符合原生开发的极简思路。
核心功能详解
2D平面比例绘制
支持按照原始户型1:60或1:100比例显示，所有尺寸单位统一为毫米，符合装修设计行业的通用规范。支持图层开关，可以单独控制尺寸标注、房间名称、家具、网格、承重墙的显示隐藏，方便用户聚焦不同的设计环节。承重墙和非承重墙采用不同样式区分，满足户型改造的基础需求。
拖拽式家具布置
内置六十余种分类齐全的家具家电，覆盖卧室、客厅、餐厨、卫浴、书房、家电等全部空间需求，家具直接从左侧库中拖入画布即可摆放。支持拖动移动、固定角度旋转，按住Shift可以开启自由角度旋转，拖动控制点即可直接调整家具尺寸，摆放过程中会自动贴墙吸附，减少手动对齐的操作成本。
墙体拆改与尺寸测量
提供专门的拆改工具，可直接修改非承重墙结构，适配旧房改造的常见需求。测量工具支持靠近墙面自动吸附，按住Shift可以锁定水平或垂直方向，测量结果会直接标注在平面图上，精度符合普通用户设计需求。工具切换通过快捷键或点击完成，操作逻辑简洁清晰。
一键切换2D/3D场景
按下快捷键T即可在2D平面图和3D场景之间无缝切换，所有修改实时同步，在3D场景中也可以直接选中拖动家具。3D场景支持鸟瞰、斜视、俯视多种预设视角，点击房间列表可以快速跳转到对应房间，方便用户从不同角度观察设计方案。
第一人称场景漫游
桌面端支持WASD按键加鼠标控制移动漫游，触屏设备提供虚拟摇杆适配移动端操作，场景中的门可以点击开关，还原真实房屋内的行走体验。支持全高墙与剖切墙切换，剖切模式可以从外部观察整体布局，全高墙模式可以模拟真实入住后的空间感受。提供日照时间滑块和夜景灯光开关，可以观察不同时间段的采光效果。
造价估算与方案导出
自动统计各个房间面积与整体套内使用面积，支持为每个房间更换不同的地面材料，可选木地板、地砖、大理石、水磨石、地毯等常见类型。系统会按照面积加5%损耗自动估算材料造价，方便用户提前规划装修预算。支持导出PNG图片分享方案，也可以导出导入JSON格式的方案文件，方便备份和迁移。
自定义户型配置
所有户型数据都以常量形式定义在index.html中，包括房间多边形、房间名称、默认地面材料、墙体信息、窗洞位置、地面材料单价、家具库参数等，用户只需要修改对应参数，保存后刷新浏览器就能生成自己的户型。开发者还提供了3D家具模型构建函数，有开发能力的用户可以新增自定义家具模型。
项目地址：https://github.com/wy51ai/floorplan-3d
⭐ Stars：1423
🔍 来源：GitHub
1,388（24h +27）· HTML - 仓库：https:///mcp-extensions OpenAI MCP Extensions 是一个 TypeScript SDK，帮助开发者为 ChatGPT 的 MCP 平台构建插件，使其功能如原生特性般无缝集成，主要面向需要在 ChatGPT 中提供侧边栏
微信扫一扫，打赏作者吧～
网友评论