floorplan-3d 拆改墙体新手教程承重墙与非承重墙如何区分1:1 真实尺寸、随时可撤销【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d 是一个纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体、测量尺寸还能一键切换到 3D 场景鸟瞰或第一人称漫游。整个应用就是一个 index.html无需构建打开即用。本教程带你从零基础完成第一次墙体拆改分清承重墙与非承重墙、在 1:1 真实毫米尺寸下放心试错并且随时可撤销。一、2 分钟快速上手git clone https://gitcode.com/gh_mirrors/fl/floorplan-3d cd floorplan-3d然后用浏览器直接打开index.html即可首次加载 3D 场景需联网加载 Three.js CDN。也可以起一个本地静态服务器python3 -m http.server 8000 # 访问 http://localhost:8000打开后你会看到一套「三室两厅两卫」的示例户型左侧是 60 余种家具库顶栏是全部工具按钮。完整功能清单见 README.md。二、承重墙与非承重墙如何区分拆改墙体新手最关心的就是这堵墙到底能不能拆floorplan-3d 用颜色把四种墙一眼讲清楚颜色墙体类型能否拆改说明⬛ 黑色承重墙❌ 不可拆点击会提示「承重墙黑色不可拆除」 深灰外墙❌ 不建议拆提示「外墙属于建筑外围护结构」 浅灰非承重墙✅ 可拆可恢复本教程的主角⬜ 米白矮墙✅ 可拆如洗衣机位半高墙墙体的坐标与类型直接写在数据里每种类型用字母标注b承重、e外墙、n可拆非承重、low矮墙见 index.html 中的WALLS数据段渲染时按类型上色见 index.html。小技巧顶栏点一下「承重墙」图层按钮index.html所有承重墙会从黑色高亮为醒目的红色整屋结构一目了然避免拆错。三、拆改墙体三步走点击即拆、再点恢复第 1 步切换工具点击顶栏「拆改墙体」按钮index.html或直接按快捷键X。屏幕下方会出现操作提示点击灰色非承重墙标记拆除再次点击恢复 · 黑色承重墙不可拆第 2 步点击灰色墙体点击任意浅灰色非承重墙墙体立刻变成橙色虚线框表示「已标记拆除」底部会提示拆掉的墙体长度单位 mm想反悔再次点击同一堵墙即可恢复操作逻辑见 index.html。第 3 步误点承重墙也不怕点到黑色承重墙或深灰外墙时只会弹出友好提示绝不会真正改动拆改保护逻辑同样写在 index.html 的toggleWall()中。拆完墙之后被拆的墙体不会参与家具的「贴墙吸附」计算index.html新空间立刻可以摆家具——把客厅和餐厅打通点墙、拖沙发一气呵成。四、1:1 真实尺寸所有数字都是毫米拆改最忌讳「感觉差不多」。floorplan-3d 的尺寸体系是真实毫米顶栏可切换1:60与原始户型图同比例和1:100显示比例换算精确到 1 CSS px 25.4/96 mm见 index.html画布左下角有实时比例尺条如「1 m」标尺随缩放同步变化切换「测量」工具快捷键M量取任意两点距离靠近墙面自动吸附按住Shift锁定水平/垂直实测值精确到毫米也就是说你拆掉的那堵「2760 mm 墙体」在图上看到的就是真实的 2.76 米和户型图标注完全对得上。五、随时可撤销大胆试错的底气拆错了摆乱了别慌方案每一步都自动保存在浏览器本地localStorage而且全程可撤销操作快捷键撤销Ctrl/⌘ Z重做Ctrl/⌘ Shift Z顶栏的「撤销 / 重做」按钮与快捷键等效index.html。即使「清空布置」按钮也只是批量删除家具照样能一步撤销。试改方案没有任何心理负担。六、按 T 键进 3D 验证拆改效果2D 上拆完墙按T一键切换到 3D 场景鸟瞰 / 斜视 / 俯视多视角检查空间关系左侧房间列表点击即飞到对应房间漫游模式桌面端WASD 鼠标第一人称走进打通后的客厅门还能点开点关「全高墙 / 剖切墙」切换剖切墙模式像切蛋糕一样看内部布局2D 与 3D 家具实时同步在 3D 里拖动的家具回到 2D 平面图上也在原位。七、常用快捷键速查按键作用T切换 2D / 3DV/M/X选择 / 测量 /拆改墙体Ctrl/⌘ ZCtrl/⌘ Shift Z撤销重做R/Shift R家具顺时针 / 逆时针旋转 90°F/Shift F适应窗口 / 全屏Esc取消当前操作户型数据房间、墙体、窗洞、家具库都写在 index.html 里改数据即可换成自己的户型许可协议为 LICENSE。总结floorplan-3d 用「颜色看类型、X 键点墙拆、CtrlZ 随便撤」三件事把拆改墙体这件装修大事变得像做游戏一样轻松黑色承重墙动不了、毫米级尺寸骗不了人、试错成本永远为零。打开浏览器5 分钟开始你的第一次户型改造 【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 floorplan-3d 拆改墙体新手教程：承重墙与非承重墙如何区分？1:1 真实尺寸、随时可撤销
floorplan-3d 拆改墙体新手教程承重墙与非承重墙如何区分1:1 真实尺寸、随时可撤销【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d 是一个纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体、测量尺寸还能一键切换到 3D 场景鸟瞰或第一人称漫游。整个应用就是一个 index.html无需构建打开即用。本教程带你从零基础完成第一次墙体拆改分清承重墙与非承重墙、在 1:1 真实毫米尺寸下放心试错并且随时可撤销。一、2 分钟快速上手git clone https://gitcode.com/gh_mirrors/fl/floorplan-3d cd floorplan-3d然后用浏览器直接打开index.html即可首次加载 3D 场景需联网加载 Three.js CDN。也可以起一个本地静态服务器python3 -m http.server 8000 # 访问 http://localhost:8000打开后你会看到一套「三室两厅两卫」的示例户型左侧是 60 余种家具库顶栏是全部工具按钮。完整功能清单见 README.md。二、承重墙与非承重墙如何区分拆改墙体新手最关心的就是这堵墙到底能不能拆floorplan-3d 用颜色把四种墙一眼讲清楚颜色墙体类型能否拆改说明⬛ 黑色承重墙❌ 不可拆点击会提示「承重墙黑色不可拆除」 深灰外墙❌ 不建议拆提示「外墙属于建筑外围护结构」 浅灰非承重墙✅ 可拆可恢复本教程的主角⬜ 米白矮墙✅ 可拆如洗衣机位半高墙墙体的坐标与类型直接写在数据里每种类型用字母标注b承重、e外墙、n可拆非承重、low矮墙见 index.html 中的WALLS数据段渲染时按类型上色见 index.html。小技巧顶栏点一下「承重墙」图层按钮index.html所有承重墙会从黑色高亮为醒目的红色整屋结构一目了然避免拆错。三、拆改墙体三步走点击即拆、再点恢复第 1 步切换工具点击顶栏「拆改墙体」按钮index.html或直接按快捷键X。屏幕下方会出现操作提示点击灰色非承重墙标记拆除再次点击恢复 · 黑色承重墙不可拆第 2 步点击灰色墙体点击任意浅灰色非承重墙墙体立刻变成橙色虚线框表示「已标记拆除」底部会提示拆掉的墙体长度单位 mm想反悔再次点击同一堵墙即可恢复操作逻辑见 index.html。第 3 步误点承重墙也不怕点到黑色承重墙或深灰外墙时只会弹出友好提示绝不会真正改动拆改保护逻辑同样写在 index.html 的toggleWall()中。拆完墙之后被拆的墙体不会参与家具的「贴墙吸附」计算index.html新空间立刻可以摆家具——把客厅和餐厅打通点墙、拖沙发一气呵成。四、1:1 真实尺寸所有数字都是毫米拆改最忌讳「感觉差不多」。floorplan-3d 的尺寸体系是真实毫米顶栏可切换1:60与原始户型图同比例和1:100显示比例换算精确到 1 CSS px 25.4/96 mm见 index.html画布左下角有实时比例尺条如「1 m」标尺随缩放同步变化切换「测量」工具快捷键M量取任意两点距离靠近墙面自动吸附按住Shift锁定水平/垂直实测值精确到毫米也就是说你拆掉的那堵「2760 mm 墙体」在图上看到的就是真实的 2.76 米和户型图标注完全对得上。五、随时可撤销大胆试错的底气拆错了摆乱了别慌方案每一步都自动保存在浏览器本地localStorage而且全程可撤销操作快捷键撤销Ctrl/⌘ Z重做Ctrl/⌘ Shift Z顶栏的「撤销 / 重做」按钮与快捷键等效index.html。即使「清空布置」按钮也只是批量删除家具照样能一步撤销。试改方案没有任何心理负担。六、按 T 键进 3D 验证拆改效果2D 上拆完墙按T一键切换到 3D 场景鸟瞰 / 斜视 / 俯视多视角检查空间关系左侧房间列表点击即飞到对应房间漫游模式桌面端WASD 鼠标第一人称走进打通后的客厅门还能点开点关「全高墙 / 剖切墙」切换剖切墙模式像切蛋糕一样看内部布局2D 与 3D 家具实时同步在 3D 里拖动的家具回到 2D 平面图上也在原位。七、常用快捷键速查按键作用T切换 2D / 3DV/M/X选择 / 测量 /拆改墙体Ctrl/⌘ ZCtrl/⌘ Shift Z撤销重做R/Shift R家具顺时针 / 逆时针旋转 90°F/Shift F适应窗口 / 全屏Esc取消当前操作户型数据房间、墙体、窗洞、家具库都写在 index.html 里改数据即可换成自己的户型许可协议为 LICENSE。总结floorplan-3d 用「颜色看类型、X 键点墙拆、CtrlZ 随便撤」三件事把拆改墙体这件装修大事变得像做游戏一样轻松黑色承重墙动不了、毫米级尺寸骗不了人、试错成本永远为零。打开浏览器5 分钟开始你的第一次户型改造 【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 RELATED READING
延伸阅读
更多一线实战笔记与深度复盘，助您持续精进
