尧图网页设计 
floorplan-3d 家具扩展教程如何新增一件家具的 2D SVG 图例与 3D 精细模型附示例代码【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d 是一款纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体再一键切换到 Three.js 3D 场景漫游。它内置了 60 余种家具但当你想要一张贵妃榻或一个吧台凳时只需修改 index.html 中的三处代码就能让新家具同时出现在 2D 平面图库例和 3D 精细模型中。本教程用一个真实示例带你走完全流程。为什么家具扩展只需要改 3 个地方floorplan-3d 没有任何构建步骤整个应用就是一个 index.html2600 余行。家具从数据到画面经过三个固定环节环节位置作用① 家具库注册LIB数组 index.html#L471-L499声明类型、名称、默认宽深、颜色左侧家具库自动出现② 2D SVG 图例furnSVG()index.html#L625-L724返回一段 SVG 字符串用于平面图和家具库缩略图③ 3D 精细模型buildFurniture()index.html#L1787-L2272用 Three.js 几何体拼装出带材质、阴影的精细模型一个好消息三个环节都有默认兜底——只改第 ① 步2D 会画成普通矩形L7223D 会生成一个 0.8m 高的方盒子L2267可以先快速验证流程再精修。第一步在家具库 LIB 中注册新家具获取代码无需安装依赖浏览器直接打开 index.html 即可git clone https://gitcode.com/gh_mirrors/fl/floorplan-3d打开 index.html找到 L471-L499 的LIB数组。每一项的格式是[类型, 名称, 宽, 深, 颜色]单位都是毫米mm{cat:书房 · 休闲, items:[ // ...已有家具... [pouf,蒲团凳,600,600,#c9a98a], // ← 新增一行即可 ]},保存后刷新页面左侧家具库就会自动多出一个蒲团凳卡片。家具库的渲染逻辑在buildLib()index.html#L1322-L1334它直接调用furnSVG(t, w, d, color)生成缩略图——这就是下一步要补上的部分。第二步绘制 2D SVG 图例furnSVG 的坐标系furnSVG(t, w, d, c)index.html#L625-L724 是一个按type分发的 switch返回 SVG 字符串。理解它只需要三条规则单位是毫米与户型数据一致原点在家具中心函数开头有x -w/2, y -d/2即家具边界框为[-w/2, -d/2, w/2, d/2]用四个小助手拼字符串rc矩形、ec椭圆、ln直线、pa路径定义在 index.html#L618-L623shade(c, k)可把颜色调亮/调暗。以蒲团凳为例俯视是一个圆形坐垫 中心纽扣case pouf: { const r Math.min(w, d) / 2; return circle r${r} fill${c} ${ST}/ circle r${r*.72} fill${shade(c,1.1)} ${ST}/ // 坐垫顶面 circle r${r*.14} fill${shade(c,.85)} ${ST}/; // 中心纽扣 }把这段插进furnSVG的 switch 里任意case之后2D 图例就完成了。参考同类简单图例sidetable圆几L693或plant绿植L666-L670。第三步搭建 3D 精细模型buildFurniturebuildFurniture(f)index.html#L1787-L2272 返回一个THREE.Group结构与 2D 完全对应只是单位换成米M v v / 1000L1525y 轴朝上。文件里提供了一套现成的积木全部可以直接调用助手函数说明位置box/rbox方盒 / 圆角方盒带圆角半径参数index.html#L1694-L1699cyl/rod圆柱 / 圆杆index.html#L1700-L1708legs/fronts一组柜腿 / 带拉手或合页的柜门面板index.html#L1756-L1786woodM/fabric/blackMetal木质、织物、黑金属等 PBR 材质index.html#L1738-L1742darker(c, k)/shade(c, k)颜色加深 / 调整明暗index.html#L592蒲团凳的 3D 模型 圆柱底座 圆角软垫case pouf: { const r Math.min(w, d) / 2, fab fabric(c); g.add(cyl(r, r*.94, .38, fab, 0, .1, 0, 32), // 圆柱底座 rbox(w, .18, d, fabric(darker(c,.92)), 0, .38, 0, .08)); // 顶部软垫 break; } 想做得更精细看现成范例床的软包床头与翻边被L1790-L1805、沙发的分缝坐垫与靠枕L1806-L1818、书桌的显示器与台灯L1887-L1905。模型会自动继承f.color、宽度f.w、深度f.d所以右侧面板改尺寸时模型会实时重建。快速验证从 2D 拖入到 3D 漫游的 5 步浏览器打开 index.html或python3 -m http.server 8000后访问本地地址左侧家具库书房 · 休闲分组中找到蒲团凳直接拖到平面图的指定位置选中后在右侧面板微调宽深与颜色R键旋转 90°按T切换到 3D 场景观察圆角软垫与织物材质是否生效按F适应窗口导出方案 JSON确认新家具数据正常持久化2D/3D 同步由同一份数据驱动。常见坑与小技巧 ️2D 图例不显示确认case写在了furnSVG的 switch 里且类型名与LIB第一项完全一致区分大小写3D 里变成默认方盒说明写在了 2D 的 switch 而漏了buildFurniture的 case兜底逻辑在 L2267单位别混2D 是毫米6003D 是米.6转换函数M()在 L1525想要圆形家具2D 用circle3D 用cyl半径记得取Math.min(w, d)/2防止拉伸默认摆放如果希望打开页面就摆好新家具可在defaultFurniture()index.html#L506-L535 中用F(pouf,蒲团凳, cx, cy, 600, 600)添加一条初始数据。小结floorplan-3d 的家具扩展链路非常清晰LIB注册数据 →furnSVG画 2D 图例 →buildFurniture搭 3D 模型三处改动全部集中在 index.html 一个文件里无需构建、即时生效。理解毫米/米两套单位制和文件内置的box、cyl、fronts等助手函数后你甚至可以为自己的户型定制任意造型的专属家具。更多自定义房间、墙体、地面材料可参考 README.md 的自定义户型一节。【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 floorplan-3d 家具扩展教程：如何新增一件家具的 2D SVG 图例与 3D 精细模型（附示例代码）
floorplan-3d 家具扩展教程如何新增一件家具的 2D SVG 图例与 3D 精细模型附示例代码【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3dfloorplan-3d 是一款纯前端的户型装修设计工具在 2D 平面图上摆放家具、拆改墙体再一键切换到 Three.js 3D 场景漫游。它内置了 60 余种家具但当你想要一张贵妃榻或一个吧台凳时只需修改 index.html 中的三处代码就能让新家具同时出现在 2D 平面图库例和 3D 精细模型中。本教程用一个真实示例带你走完全流程。为什么家具扩展只需要改 3 个地方floorplan-3d 没有任何构建步骤整个应用就是一个 index.html2600 余行。家具从数据到画面经过三个固定环节环节位置作用① 家具库注册LIB数组 index.html#L471-L499声明类型、名称、默认宽深、颜色左侧家具库自动出现② 2D SVG 图例furnSVG()index.html#L625-L724返回一段 SVG 字符串用于平面图和家具库缩略图③ 3D 精细模型buildFurniture()index.html#L1787-L2272用 Three.js 几何体拼装出带材质、阴影的精细模型一个好消息三个环节都有默认兜底——只改第 ① 步2D 会画成普通矩形L7223D 会生成一个 0.8m 高的方盒子L2267可以先快速验证流程再精修。第一步在家具库 LIB 中注册新家具获取代码无需安装依赖浏览器直接打开 index.html 即可git clone https://gitcode.com/gh_mirrors/fl/floorplan-3d打开 index.html找到 L471-L499 的LIB数组。每一项的格式是[类型, 名称, 宽, 深, 颜色]单位都是毫米mm{cat:书房 · 休闲, items:[ // ...已有家具... [pouf,蒲团凳,600,600,#c9a98a], // ← 新增一行即可 ]},保存后刷新页面左侧家具库就会自动多出一个蒲团凳卡片。家具库的渲染逻辑在buildLib()index.html#L1322-L1334它直接调用furnSVG(t, w, d, color)生成缩略图——这就是下一步要补上的部分。第二步绘制 2D SVG 图例furnSVG 的坐标系furnSVG(t, w, d, c)index.html#L625-L724 是一个按type分发的 switch返回 SVG 字符串。理解它只需要三条规则单位是毫米与户型数据一致原点在家具中心函数开头有x -w/2, y -d/2即家具边界框为[-w/2, -d/2, w/2, d/2]用四个小助手拼字符串rc矩形、ec椭圆、ln直线、pa路径定义在 index.html#L618-L623shade(c, k)可把颜色调亮/调暗。以蒲团凳为例俯视是一个圆形坐垫 中心纽扣case pouf: { const r Math.min(w, d) / 2; return circle r${r} fill${c} ${ST}/ circle r${r*.72} fill${shade(c,1.1)} ${ST}/ // 坐垫顶面 circle r${r*.14} fill${shade(c,.85)} ${ST}/; // 中心纽扣 }把这段插进furnSVG的 switch 里任意case之后2D 图例就完成了。参考同类简单图例sidetable圆几L693或plant绿植L666-L670。第三步搭建 3D 精细模型buildFurniturebuildFurniture(f)index.html#L1787-L2272 返回一个THREE.Group结构与 2D 完全对应只是单位换成米M v v / 1000L1525y 轴朝上。文件里提供了一套现成的积木全部可以直接调用助手函数说明位置box/rbox方盒 / 圆角方盒带圆角半径参数index.html#L1694-L1699cyl/rod圆柱 / 圆杆index.html#L1700-L1708legs/fronts一组柜腿 / 带拉手或合页的柜门面板index.html#L1756-L1786woodM/fabric/blackMetal木质、织物、黑金属等 PBR 材质index.html#L1738-L1742darker(c, k)/shade(c, k)颜色加深 / 调整明暗index.html#L592蒲团凳的 3D 模型 圆柱底座 圆角软垫case pouf: { const r Math.min(w, d) / 2, fab fabric(c); g.add(cyl(r, r*.94, .38, fab, 0, .1, 0, 32), // 圆柱底座 rbox(w, .18, d, fabric(darker(c,.92)), 0, .38, 0, .08)); // 顶部软垫 break; } 想做得更精细看现成范例床的软包床头与翻边被L1790-L1805、沙发的分缝坐垫与靠枕L1806-L1818、书桌的显示器与台灯L1887-L1905。模型会自动继承f.color、宽度f.w、深度f.d所以右侧面板改尺寸时模型会实时重建。快速验证从 2D 拖入到 3D 漫游的 5 步浏览器打开 index.html或python3 -m http.server 8000后访问本地地址左侧家具库书房 · 休闲分组中找到蒲团凳直接拖到平面图的指定位置选中后在右侧面板微调宽深与颜色R键旋转 90°按T切换到 3D 场景观察圆角软垫与织物材质是否生效按F适应窗口导出方案 JSON确认新家具数据正常持久化2D/3D 同步由同一份数据驱动。常见坑与小技巧 ️2D 图例不显示确认case写在了furnSVG的 switch 里且类型名与LIB第一项完全一致区分大小写3D 里变成默认方盒说明写在了 2D 的 switch 而漏了buildFurniture的 case兜底逻辑在 L2267单位别混2D 是毫米6003D 是米.6转换函数M()在 L1525想要圆形家具2D 用circle3D 用cyl半径记得取Math.min(w, d)/2防止拉伸默认摆放如果希望打开页面就摆好新家具可在defaultFurniture()index.html#L506-L535 中用F(pouf,蒲团凳, cx, cy, 600, 600)添加一条初始数据。小结floorplan-3d 的家具扩展链路非常清晰LIB注册数据 →furnSVG画 2D 图例 →buildFurniture搭 3D 模型三处改动全部集中在 index.html 一个文件里无需构建、即时生效。理解毫米/米两套单位制和文件内置的box、cyl、fronts等助手函数后你甚至可以为自己的户型定制任意造型的专属家具。更多自定义房间、墙体、地面材料可参考 README.md 的自定义户型一节。【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考