如何在 floorplan-3d 里画自己的户型ROOMS、WALLS、DOORS 数据结构完整解析自定义户型教程【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d 是一款纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体、测量尺寸还能一键切换到 3D 场景漫游。如果你想在 floorplan-3d 里画自己的户型只需要修改 index.html 里的几个数据数组——WALLS墙体、DOORS门、ROOMS房间——无需安装、无需构建改完刷新浏览器就生效。本文用最少代码带你完整读懂这些数据10 分钟画出自己的户型。快速上手1 分钟跑起来再动手改先熟悉一遍默认户型再改起来有参照git clone https://gitcode.com/gh_mirrors/fl/floorplan-3d cd floorplan-3d python3 -m http.server 8000 # 或直接双击 index.html 打开顶栏或按T切换 2D / 3DV选择、M测量、X拆改墙体漫游模式用WASD移动E开关门快捷键全表见 README.md 的「快捷键」一节户型数据总览一幢房子就写在一个文件里整个应用就是 index.html 一个文件户型数据集中在 L386 之后的「户型数据」区块。所有尺寸单位都是 mm坐标原点在左侧外墙内皮、顶部外墙内皮外墙厚度 240所以外墙段会出现 -240 这样的负坐标完全正常数据作用位置WALLS墙体承重 / 外墙 / 可拆 / 矮墙index.html#L395-L421WINS窗洞index.html#L423-L429DOORS平开门index.html#L431-L438SLIDES推拉门index.html#L440-L443ROOMS房间多边形 名称 地面材料index.html#L445-L459MATS地面材料名称与单价index.html#L460-L469LIB家具库index.html#L471-L499下面逐个拆解。WALLS 墙体4 种类型一个数组管拆改每堵墙是一个五元组[x0, y0, x1, y1, 类型]即「起点坐标、终点坐标、墙的类型」[2420,4950,4580,5190,n] // 一根横向墙长 2160mm可拆非承重墙 [1580,-240,2120,0,b] // 顶部承重墙y 从 -240 到 0 是外墙厚度类型只有 4 种决定了颜色和能不能拆类型含义渲染颜色b承重墙黑色打开承重墙图层变红e外墙深灰n可拆的非承重墙浅灰用X工具可拆low矮墙半高隔断米色细线一个实用细节拆墙状态是按「w 数组下标」记录的见 index.html#L747-L755 的renderWalls。所以先拆墙、再重排/增删WALLS顺序会导致拆墙标记错位——建议改户型时清空旧方案再拆。DOORS 门铰链点、关闭方向、开启方向怎么定平开门比墙复杂一点因为要表达「门朝哪开」。看一条真实数据{name:主卧门, rect:[6360,2400,6600,3280], h:[6600,3280], c:[0,-1], o:[1,0], len:880}字段含义通俗理解name门名称显示与排查用rect门洞矩形[x0,y0,x1,y1]墙上要留的洞口h铰链点坐标门轴装在洞口哪个角c关闭方向单位向量门关上时门扇朝向o开启方向单位向量门全开时门扇朝向len门宽mm一般 780~900entry可选true表示入户门门扇变棕色并加「入户」箭头c/o只能是四个方向之一[1,0]朝右、[-1,0]朝左、[0,1]朝下、[0,-1]朝上。口诀h放铰链所在角c是关门时门板指向o是开门 90° 后指向。2D 里会画出虚线开启弧线见 index.html#L767-L7743D 里门扇真的能沿这两个方向开合漫游时按E即可开关门见 index.html#L2330-L2340。推拉门更简单写在SLIDES里{rect:[10270,7400,10510,9770], v:true} // v:true 竖直洞口false 水平洞口窗洞WINS则是和墙一样的四元组[x0,y0,x1,y1]直接放在墙线上即可见 index.html#L423-L429。3D 窗台高度按数组位置推断第 1 条取 1.4m、第 7 条起按飘窗取 0.45m、其余 0.9m所以普通窗和飘窗的排列顺序会影响 3D 效果index.html#L2318-L2320。ROOMS 房间多边形 名称 地面材料房间是「闭合多边形 元信息」一条数据同时驱动 2D 填色、面积统计和 3D 地面{id:living, name:客厅, poly:R(4820,6610,10270,10560), mat:tile800, at:[7600,7560]}字段说明id唯一标识建议英文小写name显示名右侧面板可改名poly顶点数组[[x,y],...]任意凸/凹多边形都可以mat默认地面材料对应MATS的键at房间名标签坐标3D 里的吸顶灯也挂在这个点counted可选false表示不计入面积统计飘窗就用它两个小技巧矩形房间可以直接用现成工具函数R(x0,y0,x1,y1)它帮你生成四个顶点index.html#L444异形房间直接手写顶点。比如 L 形餐厅index.html#L453写了 8 个顶点过道也绕着墙折了 6 个顶点。顶点要按顺序围成闭合一圈顺序正反不限。注意poly描述的是房间净空间不要和墙体重叠画——外墙段带厚度内墙按中心线两侧各留 120 即可默认户型内墙厚 240。MATS 地面材料改名换价按面积估造价wood: {name:橡木地板, price:320, sw:#d8b88a} marble: {name:大理石, price:650, sw:#f1eee8}price是每平米单价sw是 2D 图上的色块。方案统计时按房间面积自动估算造价含 5% 损耗。想换材料名或单价改这里ROOMS里的mat字段引用它的键。LIB 家具库加一件新家具也很简单家具库按「分类 → 条目」组织每条是[类型, 名称, 宽, 深, 颜色]index.html#L471-L499{cat:卫浴, items:[ [toilet,马桶,400,700,#ffffff], [shower,淋浴房,900,900,#e4edf2], ]}默认摆放写在defaultFurniture()里index.html#L506-L537每个家具就一行F(类型, 名称, 中心x, 中心y, 宽, 深, 旋转角, 颜色)。画好新户型后照着这个格式把床、沙发摆进对应房间即可。六步换成自己的户型最快流程整理图纸尺寸把户型图所有标注换算成 mm记下外墙厚度常见 240先画WALLS一圈外墙 内墙门洞/窗洞处墙体留空类型按上表选补WINS/DOORS/SLIDES窗口径、门洞口、铰链方向入户门记得加entry:true写ROOMS每间房一个闭合多边形配mat、at标签点调视野范围BOUNDS它在 index.html#L560房子比默认户型大/小时按你的坐标范围放宽x/y/w/h刷新浏览器验收2D 看平面与门弧线按T进 3D 检查墙面、门窗、房间列表和面积。⚠️ 如果之前在默认户型上摆过家具改完数据后建议清一下浏览器本地存储键名huxing-design-v1见 index.html#L544旧方案不会自动适配新户型。画自己的户型常见问题FAQ单位搞错房子大十倍全项目统一 mm坐标也是 mm别填米。2D 能看到但 3D 没墙3D 是逐条读取WALLS生成墙体的index.html#L2310-L2314检查墙的x1/x0、y1/y0有没有写反或留了 NaN。门在 2D 上弧线方向怪按「铰链角 → 关门方向c→ 开门方向o」三要素重新核对画错一个方向弧线就朝外翻。入户箭头位置不对「入户」文字与箭头是按坐标直接画的index.html#L780-L781换了入户门位置记得同步挪这两行。房间面积统计多了飘窗给飘窗类房间加counted:false即可排除。改完这些数据你就拥有了一个完全属于自己的 floorplan-3d 户型2D 摆家具、3D 漫游、还能导出 PNG 和方案 JSON 分享。更多功能说明见 README.md项目采用 MIT 许可放心修改分发。【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/4 7:20:00 · 阅读 1.2k 如何在 floorplan-3d 里画自己的户型：ROOMS、WALLS、DOORS 数据结构完整解析（自定义户型教程）
如何在 floorplan-3d 里画自己的户型ROOMS、WALLS、DOORS 数据结构完整解析自定义户型教程【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d 是一款纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体、测量尺寸还能一键切换到 3D 场景漫游。如果你想在 floorplan-3d 里画自己的户型只需要修改 index.html 里的几个数据数组——WALLS墙体、DOORS门、ROOMS房间——无需安装、无需构建改完刷新浏览器就生效。本文用最少代码带你完整读懂这些数据10 分钟画出自己的户型。快速上手1 分钟跑起来再动手改先熟悉一遍默认户型再改起来有参照git clone https://gitcode.com/gh_mirrors/fl/floorplan-3d cd floorplan-3d python3 -m http.server 8000 # 或直接双击 index.html 打开顶栏或按T切换 2D / 3DV选择、M测量、X拆改墙体漫游模式用WASD移动E开关门快捷键全表见 README.md 的「快捷键」一节户型数据总览一幢房子就写在一个文件里整个应用就是 index.html 一个文件户型数据集中在 L386 之后的「户型数据」区块。所有尺寸单位都是 mm坐标原点在左侧外墙内皮、顶部外墙内皮外墙厚度 240所以外墙段会出现 -240 这样的负坐标完全正常数据作用位置WALLS墙体承重 / 外墙 / 可拆 / 矮墙index.html#L395-L421WINS窗洞index.html#L423-L429DOORS平开门index.html#L431-L438SLIDES推拉门index.html#L440-L443ROOMS房间多边形 名称 地面材料index.html#L445-L459MATS地面材料名称与单价index.html#L460-L469LIB家具库index.html#L471-L499下面逐个拆解。WALLS 墙体4 种类型一个数组管拆改每堵墙是一个五元组[x0, y0, x1, y1, 类型]即「起点坐标、终点坐标、墙的类型」[2420,4950,4580,5190,n] // 一根横向墙长 2160mm可拆非承重墙 [1580,-240,2120,0,b] // 顶部承重墙y 从 -240 到 0 是外墙厚度类型只有 4 种决定了颜色和能不能拆类型含义渲染颜色b承重墙黑色打开承重墙图层变红e外墙深灰n可拆的非承重墙浅灰用X工具可拆low矮墙半高隔断米色细线一个实用细节拆墙状态是按「w 数组下标」记录的见 index.html#L747-L755 的renderWalls。所以先拆墙、再重排/增删WALLS顺序会导致拆墙标记错位——建议改户型时清空旧方案再拆。DOORS 门铰链点、关闭方向、开启方向怎么定平开门比墙复杂一点因为要表达「门朝哪开」。看一条真实数据{name:主卧门, rect:[6360,2400,6600,3280], h:[6600,3280], c:[0,-1], o:[1,0], len:880}字段含义通俗理解name门名称显示与排查用rect门洞矩形[x0,y0,x1,y1]墙上要留的洞口h铰链点坐标门轴装在洞口哪个角c关闭方向单位向量门关上时门扇朝向o开启方向单位向量门全开时门扇朝向len门宽mm一般 780~900entry可选true表示入户门门扇变棕色并加「入户」箭头c/o只能是四个方向之一[1,0]朝右、[-1,0]朝左、[0,1]朝下、[0,-1]朝上。口诀h放铰链所在角c是关门时门板指向o是开门 90° 后指向。2D 里会画出虚线开启弧线见 index.html#L767-L7743D 里门扇真的能沿这两个方向开合漫游时按E即可开关门见 index.html#L2330-L2340。推拉门更简单写在SLIDES里{rect:[10270,7400,10510,9770], v:true} // v:true 竖直洞口false 水平洞口窗洞WINS则是和墙一样的四元组[x0,y0,x1,y1]直接放在墙线上即可见 index.html#L423-L429。3D 窗台高度按数组位置推断第 1 条取 1.4m、第 7 条起按飘窗取 0.45m、其余 0.9m所以普通窗和飘窗的排列顺序会影响 3D 效果index.html#L2318-L2320。ROOMS 房间多边形 名称 地面材料房间是「闭合多边形 元信息」一条数据同时驱动 2D 填色、面积统计和 3D 地面{id:living, name:客厅, poly:R(4820,6610,10270,10560), mat:tile800, at:[7600,7560]}字段说明id唯一标识建议英文小写name显示名右侧面板可改名poly顶点数组[[x,y],...]任意凸/凹多边形都可以mat默认地面材料对应MATS的键at房间名标签坐标3D 里的吸顶灯也挂在这个点counted可选false表示不计入面积统计飘窗就用它两个小技巧矩形房间可以直接用现成工具函数R(x0,y0,x1,y1)它帮你生成四个顶点index.html#L444异形房间直接手写顶点。比如 L 形餐厅index.html#L453写了 8 个顶点过道也绕着墙折了 6 个顶点。顶点要按顺序围成闭合一圈顺序正反不限。注意poly描述的是房间净空间不要和墙体重叠画——外墙段带厚度内墙按中心线两侧各留 120 即可默认户型内墙厚 240。MATS 地面材料改名换价按面积估造价wood: {name:橡木地板, price:320, sw:#d8b88a} marble: {name:大理石, price:650, sw:#f1eee8}price是每平米单价sw是 2D 图上的色块。方案统计时按房间面积自动估算造价含 5% 损耗。想换材料名或单价改这里ROOMS里的mat字段引用它的键。LIB 家具库加一件新家具也很简单家具库按「分类 → 条目」组织每条是[类型, 名称, 宽, 深, 颜色]index.html#L471-L499{cat:卫浴, items:[ [toilet,马桶,400,700,#ffffff], [shower,淋浴房,900,900,#e4edf2], ]}默认摆放写在defaultFurniture()里index.html#L506-L537每个家具就一行F(类型, 名称, 中心x, 中心y, 宽, 深, 旋转角, 颜色)。画好新户型后照着这个格式把床、沙发摆进对应房间即可。六步换成自己的户型最快流程整理图纸尺寸把户型图所有标注换算成 mm记下外墙厚度常见 240先画WALLS一圈外墙 内墙门洞/窗洞处墙体留空类型按上表选补WINS/DOORS/SLIDES窗口径、门洞口、铰链方向入户门记得加entry:true写ROOMS每间房一个闭合多边形配mat、at标签点调视野范围BOUNDS它在 index.html#L560房子比默认户型大/小时按你的坐标范围放宽x/y/w/h刷新浏览器验收2D 看平面与门弧线按T进 3D 检查墙面、门窗、房间列表和面积。⚠️ 如果之前在默认户型上摆过家具改完数据后建议清一下浏览器本地存储键名huxing-design-v1见 index.html#L544旧方案不会自动适配新户型。画自己的户型常见问题FAQ单位搞错房子大十倍全项目统一 mm坐标也是 mm别填米。2D 能看到但 3D 没墙3D 是逐条读取WALLS生成墙体的index.html#L2310-L2314检查墙的x1/x0、y1/y0有没有写反或留了 NaN。门在 2D 上弧线方向怪按「铰链角 → 关门方向c→ 开门方向o」三要素重新核对画错一个方向弧线就朝外翻。入户箭头位置不对「入户」文字与箭头是按坐标直接画的index.html#L780-L781换了入户门位置记得同步挪这两行。房间面积统计多了飘窗给飘窗类房间加counted:false即可排除。改完这些数据你就拥有了一个完全属于自己的 floorplan-3d 户型2D 摆家具、3D 漫游、还能导出 PNG 和方案 JSON 分享。更多功能说明见 README.md项目采用 MIT 许可放心修改分发。【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考