我最近开始尝试在 ProtoPie 中生成一个 3D，或者更准确地说是 3D 对象的 360° 视图，这样我就可以通过滑动或使用按钮轻松地操控它。
虽然这个过程最终比我最初预想的更简单，但我确实花了一些时间来确定在 ProtoPie 中实现这种效果的最有效方法。尽管看起来步骤很多，我可以向你保证，它比你想象的要简单。
下面是一份可供你跟着操作的分步指南。不过，就像任何好食谱一样，我们首先需要一些关键“食材”来制作我们的 Pie。
本教程的最终效果。
步骤 01：食材
由于目前还无法将真实的 3D 对象直接集成到 ProtoPie Studio 中，我们将通过从 3D 对象生成 24 张图像（或帧）来模拟这种效果。
**注意：**随着 Connect 2.7 的发布，你可以在 ProtoPie Connect 中集成 3D 对象。
在任意 3D 软件中，创建一个围绕对象 360° 旋转的相机。接下来，将渲染设置配置为 24 帧，搞定！这样你就得到了静态帧。
步骤 02：预热你的烤箱
在 ProtoPie Studio 中，我们的第一步是创建一个新项目并导入所有渲染好的图片。将这些图片对齐，使其完全重叠，然后将它们编组。这个组将命名为“frames”。确保组内每一帧的透明度都设为 0，只有第 1 帧设为 100。
接下来，我们在 variables 下创建一个新变量，并命名为“xPos_var”。
步骤 03：加大火力
首先，从 Triggers 菜单中创建一个 Chain，并将其连接到我们的“xPos_var”变量。
接着，我们在 chain 中加入一个Opacity响应，并将其指定为我们的初始帧。我们继续这个过程，为每一帧都添加相应响应，直到所有帧都被加入到Chain触发器中。我复制了第一帧，并为每个副本创建了一个新图层。
为 3D 渲染中的每一帧使用 Chain 触发器和 Opacity 响应。
步骤 04：我们的位置在哪里？
现在，我们先暂时把 chain 放一边，稍后在本教程中再回到它。
首先，我们必须确定当前位置。先创建一个矩形并命名为“xPos Dot”，把它放在屏幕左侧某处。我给它设置了鲜艳的颜色，便于识别。
最后，我们将这个“xPos Dot”进行编组。为什么？因为这样可以把这个矩形的起始位置设定为 x = 0、y = 0，从而简化流程。
在 X 轴上创建一个跟踪点，用于跟踪我们在全景图中的位置。
步骤 05：开始拖动吧。
这里的目标是将矩形的位置与鼠标/触控位置关联起来，然后再把这个位置映射回 chain。这样就能带来真正旋转对象的感觉。
开始吧！
添加一个Drag触发器，并将拖动作用到我们的 frames 组上。
接着添加一个Move响应，并把我们的 xPos Dot 加进去。将方向改为双向，并限制自定义范围 min = 0、max = 1201。
使用 Drag 触发器可以让我们在屏幕上移动 xPos Dot。
步骤 06：完善我们的位置
现在我们可以移动 xPos Dot 了，但我们还需要检测它的位置。
先添加一个 **Detect **触发器，并将其设置为 xPos Dot = x。
然后添加一个Assign响应，并将其赋值到我们在第 2 步中创建的变量（xPos_var）。
在这个 assign 触发器的公式区域中，加入 xPos Dot 并在后面加上 .x。看起来应类似于“xPos Dot.x”。
我们跟踪 xPos Dot，稍后将该值分配给 Chain 触发器。
点击预览后，你现在就可以移动我们那块亮色矩形了。
步骤 07：把主要食材串联进 Chain
我们的目标是告诉 chain 如何使用我们在变量中记录的“xPos Dot”位置信息。为此，打开之前创建的Chain触发器，并选择第 1 个透明度图层。
这里我们需要添加并调整范围。
首先添加范围：0 = opacity: 100，以及 range: 50 = 100
这实际上是在告诉 chain：当 xPos Dot 的值位于 0 到 50 范围内时，显示第一帧。
这里还需要添加第二个范围。我们将其设置为 51 = 0 和 51 = 0。
这告诉 chain：当 xPos Dot 超过 51 这个范围时，隐藏这一帧。
告诉 chain 在全景图中何时显示每一帧
步骤 08：最后烘焙
接下来这一步是整个 Pie 中工作量最大的一步。虽然非常重复，但效果非常棒！
现在，我们必须为每一帧重复上一步，同时给每一帧再加入第三个范围。
每次将范围递增 50，第一个范围的值减 1，第三个范围的值加 1。这样可以告诉 chain 在高于或低于特定值时隐藏该帧。
并非所有帧都完全相同，我们需要密切关注每一帧的范围。
注意：第 2 帧的范围值应为 100 到 150，第 3 帧 = 150 到 200，依此类推。
我们的 Pie 可以开吃啦！
当你为每一帧都填入这些数值后，旋转效果基本就完成了！把“xPos Dot”的透明度调为 0 将其隐藏，就大功告成！
注意：若要通过按钮实现手动旋转，你可以添加一个Tap触发器和一个针对“xPos Dot, ”的Move响应，每次点击将其移动 101。
感谢阅读！
在 ProtoPie 中开始使用 3D 对象进行原型设计
开启你的 ProtoPie 原型设计之旅，在这里你可以将动态 3D 对象引入设计，拓展创意边界，并通过沉浸式交互体验提升用户参与度。
关于作者：
Evert Martin 是 Inert 和丰田屡获殊荣的高级 HMI 设计师，以打造沉浸式用户界面的专业能力而闻名。他主导全球车辆与应用原型设计计划，将创新与实用性无缝结合。凭借其投入与专注，Evert 在获奖的无障碍设计以及重塑汽车用户参与体验方面表现卓越。
