户型装修设计

纯前端的户型装修设计工具：在 2D 平面图上摆放家具、拆改墙体、测量尺寸，一键切换到 Three.js 3D 场景，可以鸟瞰，也可以第一人称漫游。整个应用就是一个 index.html，无需构建，打开即用。

功能

2D 平面布置

• 按原始户型 1:60 / 1:100 比例显示，尺寸单位 mm
• 从左侧家具库拖入 60 余种家具家电（卧室、客厅、餐厨、卫浴、家电、书房休闲）
• 拖动移动、旋转（Shift 自由角度）、调整尺寸，贴墙自动吸附
• 测量工具（靠近墙面自动吸附，Shift 锁定水平 / 垂直）
• 拆改非承重墙，承重墙单独标示
• 图层开关：尺寸标注、房间名、家具、网格、承重墙

3D 场景

• 鸟瞰、斜视、俯视多种视角，点击房间列表可飞到对应房间
• 漫游模式：桌面端 WASD + 鼠标，触屏设备用虚拟摇杆，可以点门开关
• 全高墙 / 剖切墙切换，日照时间滑块，夜景灯光
• 精细家具模型：柜门分缝与拉手、软包床头、带环境反射的金属与陶瓷材质等
• 在 3D 中也能选中、拖动家具，与 2D 方案实时同步

方案与统计

• 房间面积与套内使用面积自动统计
• 为每个房间更换地面材料（木地板、地砖、大理石、水磨石、地毯等），按面积加 5% 损耗估算造价
• 撤销 / 重做，方案自动保存在浏览器本地
• 中文 / English 界面切换（顶栏右侧按钮，默认中文，选择会记住）
• 导出 PNG 图片，导出 / 导入方案 JSON

快速开始

git clone <仓库地址>
cd <仓库目录>

然后直接用浏览器打开 index.html。也可以起一个本地静态服务器：

python3 -m http.server 8000
# 访问 http://localhost:8000

Three.js 通过 jsDelivr CDN 加载，首次打开 3D 场景需要联网。

快捷键

技术栈

• 原生 HTML / CSS / JavaScript，无框架、无构建步骤
• 2D 平面图用 SVG 绘制
• 3D 场景用 Three.js r160（OrbitControls、PointerLockControls、RoundedBoxGeometry、RoomEnvironment、CSS2DRenderer）
• 数据保存在 localStorage

自定义户型

户型数据写在 index.html 里：

• ROOMS：房间多边形、名称、默认地面材料
• WALLS / WINS：墙体与窗洞
• MATS：地面材料名称与单价
• LIB：家具库（类型、名称、默认尺寸、颜色）
• buildFurniture()：各类家具的 3D 模型

改这些数据就能换成自己的户型。