企业官网建设流程全解析

floorplan-3d 家具扩展教程：如何新增一件家具的 2D SVG 图例与 3D 精细模型（附示例代码）

【免费下载链接】floorplan-3d项目地址: https://gitcode.com/gh_mirrors/fl/floorplan-3d

floorplan-3d 是一款纯前端的户型装修设计工具：在 2D 平面图上摆放家具、拆改墙体，再一键切换到 Three.js 3D 场景漫游。它内置了 60 余种家具，但当你想要一张"贵妃榻"或一个"吧台凳"时，只需修改 index.html 中的三处代码，就能让新家具同时出现在 2D 平面图库例和 3D 精细模型中。本教程用一个真实示例带你走完全流程。

为什么家具扩展只需要改 3 个地方？

floorplan-3d 没有任何构建步骤，整个应用就是一个 index.html（2600 余行）。家具从数据到画面，经过三个固定环节：

一个好消息：三个环节都有默认兜底——只改第 ① 步，2D 会画成普通矩形（L722），3D 会生成一个 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-L623；shade(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 精细模型（buildFurniture）

buildFurniture(f)index.html#L1787-L2272 返回一个THREE.Group，结构与 2D 完全对应，只是单位换成米（M = v => v / 1000，L1525），y 轴朝上。

文件里提供了一套现成的"积木"，全部可以直接调用：

蒲团凳的 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 步

1. 浏览器打开 index.html（或python3 -m http.server 8000后访问本地地址）；
2. 左侧家具库"书房 · 休闲"分组中找到蒲团凳，直接拖到平面图的指定位置；
3. 选中后在右侧面板微调宽深与颜色，R键旋转 90°；
4. 按T切换到 3D 场景，观察圆角软垫与织物材质是否生效，按F适应窗口；
5. 导出方案 JSON，确认新家具数据正常持久化（2D/3D 同步由同一份数据驱动）。

常见坑与小技巧 🛠️

• 2D 图例不显示：确认case写在了furnSVG的 switch 里，且类型名与LIB第一项完全一致（区分大小写）；
• 3D 里变成默认方盒：说明写在了 2D 的 switch 而漏了buildFurniture的 case，兜底逻辑在 L2267；
• 单位别混：2D 是毫米（600），3D 是米（.6），转换函数M()在 L1525；
• 想要圆形家具：2D 用<circle>，3D 用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