升降桌配置器可用于原型设计阶段(嵌入到 Figjam 或 Miro)或作为数字营销内容(嵌入到网站中)。当连接到 API 时,该配置器还可以用作价格计算器,并可以无缝集成到购物车工作流中。
该配置器呈现了升降桌的数字孪生,并包含三个交互式组件来解释产品功能。这些交互应该展示:
最终版本还可以在 AR 中进行预览,以便在真实的物理空间中进行查看。
该办公桌在 CAD 软件 Plasticity 中使用 NURBS 进行建模,然后导出为 .step 文件并导入到 Vectary Studio 中。导入的 CAD 几何体经过调整以减少多边形数量,并烘焙为网格几何体。桌面在 Substance Painter 中进行了 UV 展开,并在其中制作了纹理。
此场景中的每个交互都由 3 个热点控制和触发.
1. 材质切换器
通过点击热点来触发 悬浮 UI 的显示。此交互将打开 FUI,你可以在其中看到该特定材质的名称和色板。在这种情况下,FUI 仅由 3 张图片组成,因此文本并不是在 FUI 本身中制作的,而是整体作为一张图片导入的。当你想加快制作速度并跳过在 悬浮 UI 本身中调整布局时,这是一个绝佳的小技巧。一旦你点击其中一张图片,就会触发另一个交互——材质 (Materials)。在这里,你可以选择任意数量的对象,并指定应该激活哪种材质。由于此配置器具有两种不同的桌面尺寸,你需要为这两种尺寸都更改材质。
2. 移动
移动由热点控制,这些热点触发沿 Z 轴向上或向下的“变换” (Transformation)。
提示:创建一个包含你希望受变换影响的所有对象的组。如果你希望热点随特定对象一起移动,也请将它们包含在该组中。
3. 尺寸
最后一个热点控制桌面的尺寸,因为它既能触发大尺寸或小尺寸,也会触发热点的改变。这是因为两个热点都在变体中,从而创造了一个无限循环。点击大热点会触发大桌面和小热点。当你点击小热点时,情况则相反。
提示:每个桌面都有单独烘焙的光照贴图,确保在尺寸变化时阴影仍保持在正确的位置。



灯光设置包括三盏灯—— 两盏矩形灯和一盏平行光 ——以及 HDRi 环境。其目的是照亮顶部区域,在桌面上产生美妙的反射,同时从其他角度产生对比鲜明的边缘。平行光将光线均匀地分散到整个场景中,你可以通过轴心点完全控制其方向。矩形灯用于桌子上的较小区域。
提示:烘焙后,禁用每盏灯的阴影投射可以提高性能。
在材质方面,我们的目标是实现一个中性的工作室风场景,具有无限背景、柔和阴影,并以木纹作为视觉焦点。桌腿采用简单的非金属材质,顶部为白色,而桌面则使用了一张展开的纹理贴图。其他的材质类型是通过 复制此基础材质并调整色相,以及对比度和亮度设置来创建的。在分享文件时,这种方法可以显著减小文件大小并缩短加载时间。
对场景的外观和灯光感到满意后,即可开始 烘焙过程。烘焙通过添加细微阴影和环境光遮蔽,来增强场景的真实感。
提示:在较高分辨率下进行烘焙,然后进行缩减。例如,以 2K 分辨率进行烘焙,然后将最终分辨率设置为 1K。别忘了开启降噪。在烘焙前,使用 Lightmap 预览模式预览场景,并注意桌腿等移动元素,以避免出现多余的阴影。
最终版本也应该在增强现实 (AR) 中进行预览,以便在真实的物理空间中查看。使用正确的尺寸非常重要,因为模型将以 1:1 的比例呈现在增强现实中。在预览文件时,AR 设置允许你启用或禁用缩放。目前,在 AR 中实现场景动画的唯一方法是通过动画。动画 (Animation) 模式下的第一个动画将是在 AR 中循环并展示的动画。在此示例中,我们让升降桌的上下移动动作实现了循环。

这家高端家具制造商使用 Vectary 平台为其网站构建了沉浸式配置器。这一切均由一个人——他们之前没有任何 Vectary 使用经验的产品设计师——独立完成。

