返回案例研究
Building productsbuilding productsbike racks3d viewersite furnishings
Dero：无需代码嵌入的 3D 自行车停车架配置器
Dero·
Dero 是一家位于明尼苏达州明尼阿波利斯的自行车停车设施制造商，也是 PlayCore 旗下公司。自 1995 年以来，该公司一直为客户提供支持，产品涵盖商用及定制自行车架、公共自行车维修站、自行车棚、自行车储物柜、场地设施和街景产品；客户既包括购买单个车架的业主，也包括为数百名骑行者规划自行车停车间的建筑师。其产品页面提供规格制定者所需的资料：宣传册、报审资料、安装指南、CAD、Revit 和 SketchUp 文件以及 CSI 规范。
其中七个页面如今还配备了3D 自行车架配置器，在 Simplio3D 中构建，标题简洁地写为 3D 查看器。它刻意保持基础简洁。访客可以选择车架安装方式，为提供该选项的车架添加倚靠杆，并试用不同表面处理，车架便会随之以 3D 形式变化。没有价格、购物车或表单；将它部署到 dero.com，只需粘贴嵌入代码片段，无需编程。
项目概览
| 项目 | 详情 |
|---|---|
| 客户 | 明尼苏达州明尼阿波利斯的 Dero，PlayCore 旗下公司：自 1995 年以来提供自行车架、定制车架、公共自行车维修设施、自行车棚、自行车储物柜、场地设施及街景设施 |
| 网站 | dero.com，一个包含 Dero 自有商店和报价清单的 WordPress 网站 |
| 产品 | 七款商用自行车架：Hoop Rack、Hoop Rack Heavy Duty、Downtown Rack、Arc Rack、Swerve Rack、Bike Hitch 和 Bike Bike Rack |
| 3D 查看器的功能 | 以 3D 形式展示所选安装方式的车架；如车架配有倚靠杆，可选择开启或关闭；并可选择 22 种表面处理，同时汇总所选配置 |
| 未包含的内容 | 价格、购物车和表单。购买和报价仍沿用 Dero 产品页面原有的选项 |
| 设置 | 每个车架配备一个基础配置器，只需将其代码片段粘贴到产品页面“3D 查看器”标题下即可嵌入。无需插件，无需商城集成，也无需编写代码 |
| 平台 | Simplio3D 的早期版本 |
客户的需求
车架本体的表面处理
Dero 的车架提供镀锌、不锈钢或多种粉末涂层颜色选择。一小块色样很难充分展示一种颜色应用于整个车架时的实际效果。
地面安装或预埋安装
这些车架均可通过底板螺栓固定于地面，也可预埋安装；两种安装方式在车架与地面交接处呈现出不同的视觉效果。
适用于可加装支撑杆的款式
七款衣架中有四款可选配支撑杆，因此预览需要能够添加或移除该配件。
预览，而非第二个商店
每个产品页面都已有购买或获取报价的选项。3D 视图只需帮助用户做出选择。
全系列采用一致的操作方式
七款衣架都需要在相同位置提供相同选项，因此使用过一款 3D 查看器的访客即可轻松使用全部产品。
无需开发项目
这些查看器必须能够部署到现有的 WordPress 产品页面，无需插件、开发人员，也无需对商店进行任何改动。
解决方案：在七个产品页面上提供 3D 自行车架配置器
在 dero.com 上，每款车架都有独立的产品页面，包含产品说明、文档和下载内容，以及 Dero 自己的购买或询价选项。其中七款产品——从被 Dero 称为自行车停车标准的 Hoop Rack，到自行车造型的 Bike Bike Rack——如今都在页面下方增设了标题为3D 查看器的版块。
每个 3D 查看器都是一款基础配置器。车架可在浅灰色背景上旋转和缩放，旁边的面板最多仅提供三项选择：安装方式、倚靠杆和表面处理。没有任何定价、加入购物车或提交操作。它唯一的任务就是展示车架，因此设置工作极少。
安装方式、倚靠杆和表面处理，均可在 3D 车架上直观呈现
这三项选择会改变车架安装后的外观：
- 安装方式。 下拉菜单提供地面安装和埋地安装。地面安装会显示车架通过螺栓固定的底板；埋地安装则会将底板替换为伸入地面的加长支脚。
- 倚靠杆。 Hoop Rack、Hoop Rack Heavy Duty、Downtown Rack 和 Arc Rack 上提供此开关。开启后，车架上会出现一根横向杆；其余三款车架则不会显示该开关。
- 表面处理。 每款车架均提供相同的 22 种色样：镀锌、不锈钢，以及黑色、哑光黑、白色、浅灰色、红色、黄色、亮黄色、橙色、蓝色、天蓝色、绿色、浅绿色、猎人绿、棕褐色、青铜色、银色、深紫色、酒红色、米色和铁灰色。镀锌色样呈现的是镀锌钢的斑驳纹理，而非纯色。
面板下方的小型(i)按钮可打开配置摘要，以文字列出所选配置。例如，在 Swerve Rack 上会显示：选择安装方式：地面安装；选择表面处理：酒红色。访客可直接使用同一页面上的购买或询价选项。
每个 3D 查看器提供的内容
七款停车架，每款产品页面均配有专属 3D 查看器。
| 停车架 | Dero 如何描述它 | 3D 查看器中的选项 |
|---|---|---|
| 环形停车架 | 自行车停车架标准：粗管材配全半径弯曲；可停放两辆自行车 | 安装方式、倚靠杆、22 种饰面 |
| 重型环形停车架 | 比标准环形停车架更大、更粗的管材 | 安装方式、倚靠杆、22 种饰面 |
| 市中心停车架 | 加厚方管搭配加宽设计，提供全面支撑；可停放两辆自行车 | 安装方式、倚靠杆、22 种饰面 |
| 弧形停车架 | 方形管材搭配简洁的几何线条；可停放两辆自行车 | 安装方式、倚靠杆、22 种饰面 |
| 转向停车架 | 粗管材造型贴合自行车车架；可停放两辆自行车 | 安装方式，22 种表面处理 |
| 自行车挂架 | 立柱与圆环采用全圆角弯曲设计，轮廓纤细；可停放两辆自行车 | 安装方式，22 种表面处理 |
| 自行车造型自行车停车架 | 一个造型如自行车的停车架，被描述为兼具实用性的街头艺术品；可停放两到四辆自行车 | 安装方式，22 种表面处理 |
如何搭建像 Dero 这样的 3D 查看器
只需五个步骤，全部无需编写代码。
上传 3D 模型
将停车架模型添加到新项目中。Simplio3D 支持 GLB、GLTF、FBX、OBJ、STL 和 DAE 文件。
添加安装方式
下拉菜单提供地面安装和埋地安装两种选项，每种都会在模型上显示对应的底座。
添加倚靠杆
用于显示或隐藏倚靠杆的开关，适用于配备倚靠杆的停车架。
添加表面处理选项
每种表面处理对应一个色样：镀锌钢材使用纹理，其他每种处理使用一种颜色。
粘贴嵌入代码片段
复制配置器的 iframe 代码片段并粘贴到产品页面中。之后在 Simplio3D 中所做的更改会自动显示在页面上，无需再次编辑。
与 Dero 自有购买和询价选项并列的预览
Dero 的产品页面本身已支持销售。每个页面都提供 Dero 自有的购买或询价选项：表面处理、安装方式，以及适用时的倚靠杆，随后可选择数量，并使用加入购物车和加入询价单；较大数量的订单则通过询价清单处理。3D 查看器位于同一页面，不会干扰这些功能。
它没有价格、购物车或自己的表单，也不会向任何地方发送信息。访客先查看自己设想的安装方式和表面处理下的车架效果，然后在 Dero 的选项中做出相同选择。正是这种精简设计使其能够快速上线：无需关联产品、无需同步价格，也无需将表单转交给任何人。
无需编写代码即可嵌入
每个 Simplio3D 配置器都提供可复制的分享链接和 iframe 代码片段。在每个 Dero 产品页面上，该代码片段都以全宽形式置于 3D 查看器 标题下方。无需插件、脚本或与商店建立连接，因此上线一个查看器只需将一段代码片段粘贴到一个页面中。
由于页面中仅包含该代码片段，3D 查看器本身在 Simplio3D 中进行维护。新增表面处理或更新模型都可在其中完成，下次加载页面时便会显示在 dero.com 上，无需任何人编辑产品页面。了解更多类似查看器：3D 产品查看器。
成果
每一种饰面，都能在停车架上直观看到
访客可在购买或索取报价前，为正在查看的停车架试用全部 22 种饰面，并选择所需的安装方式和倚靠杆。
七个页面使用同一工具
从 Hoop Rack 到 Bike Bike Rack，每个 3D 查看器的使用方式都相同，提供同样三类选择和相同的饰面。
网站无需新增维护工作
产品页面只包含一段嵌入代码。所有更改都在 Simplio3D 中完成，商店和报价清单则照常运行。
Dero 怎么说
Simplio3D 让我们能够轻松展示自行车架安装后的实际效果。每个 3D 查看器都包含安装方式、适用于配有此功能的车架的倚靠杆，以及我们完整的表面处理选择；只需粘贴嵌入代码即可将其添加到产品页面。无需开发人员，无需插件，页面也始终易于维护。
Colin K.设计师 · Dero
关于此项目的问题
这是一种工具，可通过 3D 展示自行车架，并让买家更改安装方式、倚靠杆或表面处理等选项，在订购前查看效果。Dero 的配置器特意保持简洁：提供三类选项和 3D 视图，不包含价格或表单。
共有七款商用停车架：Hoop Rack、Hoop Rack Heavy Duty、Downtown Rack、Arc Rack、Swerve Rack、Bike Hitch 和 Bike Bike Rack。每款停车架的查看器均位于 dero.com 对应的产品页面上。
可选择安装方式（地面安装或预埋安装）、四款提供该选项的停车架上的倚靠杆，以及表面处理。表面处理提供 22 种样本，包括镀锌钢、不锈钢和 20 种颜色。页面还会以文字汇总所选配置。
Dero 的产品页面本身已提供购买或获取报价的选项。3D 查看器仅帮助访客进行选择，因此设置简单，后续维护也更轻松。
不需要。每个 3D 查看器都是从 Simplio3D 复制并粘贴到产品页面中的 iframe 代码片段。无需插件，也无需连接商店；在 Simplio3D 中所做的更改会自动显示在页面上，无需编辑页面。
可以。Simplio3D 配置器可在产品需要时添加条件规则、定价、报价或联系表单，以及增强现实功能。下一部分将介绍此类项目如今还可新增哪些功能。
如今此类项目还能增加什么
本节内容均不属于上述 Dero 的 3D 查看器；后者运行于 Simplio3D 的早期版本。对于如今刚开始采用此方案的自行车架或场地设施制造商而言：
- 让车架出现在实际安装位置。 无需应用程序，增强现实即可通过手机将配置完成的车架放置在路面或自行车停车间中：AR 上的 Quick Look、iOS 上的 Scene Viewer，以及通过桌面浏览器生成的二维码。
- 在模型上展示细节。 热点可添加带信息弹窗的标记，例如管材尺寸或车架可停放的自行车数量；场景功能则可切换背景和镜头。
- 让查看器与订单表单保持同步。 嵌入式配置器会将每次变更作为浏览器事件
simplio3d:option.changed发布，因此希望实现同步的网站可通过几行自有脚本，在自己的订购表单中预先选择相同的表面处理和安装方式。 - 更快扩展整个产品系列。 可根据文字描述为另一款车架生成首个配置器；按类别批量添加功能可将共享材料库中的表面处理系列转换为色样组，无需手动创建每个色样。
- 检查每个查看器。 AI 助手可审核选项覆盖范围和条件逻辑，例如确认每种表面处理均有对应材质，并提出修复建议。Claude 等 AI 客户端可通过带范围限制的连接，经由 MCP 连接到工作区并执行相同检查；价格或 SKU 的变更则始终仅以待处理变更的形式出现，由人工决定是否应用。
相关案例研究
Tentest：一款在每个面板上都配备设计画布的 3D 弹出式帐篷配置器
Tentest 是 Scandipro Group 旗下的爱沙尼亚弹出式帐篷制造商，打造了自己的 3D 配置器：提供六种帐篷尺寸，每个面板均设有支持上传徽标的设计画布、AR，并可提交报价请求。
Fell & Frame：为 WooCommerce 自主打造的木窗配置器
Carlisle 木工企业 Fell & Frame 在 Simplio3D 中自主打造了木窗配置器。买家可将六种平开窗款式精确设定至毫米，并添加至 WooCommerce 购物篮。
Evergreen Shutters：在内部报价系统中预览 3D 百叶窗
Evergreen Shutters Ltd 需要在其自有报价平台中，为数千种百叶窗组合提供精准的可视化效果。他们没有自行开发 3D 引擎，而是集成了 Simplio3D API，并在每份报价中返回生成的 3D 视图。