软硬件交互
将ProtoPie 文件导入 3D/VR 环境最新教程，包括Apple Vision Pro、Meta Quest
欢迎来到 3D 和 VR 环境中的高保真原型世界！ 作为设计师，大家都知道在尽可能真实的环境中测试交互原型至关重要。 但如果你没有多少编程经验，那么将设计稿导入 Unity 3D 的过程可能既耗时又复杂。
ProtoPie
April 11, 2024
将 ProtoPie 原型导入到 Unity 中进行 3D 和 VR 测试
欢迎一起来探讨和展望在未来我们如何以高保真原型对空间设计进行表现，从而构建出期望的 3D 和 VR 环境。作为设计师，你一定明白，尽可能多地在真实场景中测试与完善你的原型究竟有多重要。现如今，通过 ProtoPie Connect 即可实现与与顶级 VR 头显的无缝集成，例如集成 Meta Quest (Oculus) 或是新近推出的 Apple Vision Pro 。有了这一模板，即便没有任何编程经验，仍然可以确保你的设计得以发挥潜力，充分表达你的创意。
以往，将设计融入 Unity 3D 是一件费时费力且复杂无比的工作；而现在，我们已经可以告别这样的繁冗操作——我们简化了通过 ProtoPie 制作的高保真原型的导入机制。无论你是经验丰富的设计大牛还是刚起步的初学者，这一篇模板指南都可以引导你在 Unity 中更为灵动地预览和测试原型。那么，下面就请找出你的 ProtoPie 原型，我们一起到 3D 和 VR 测试的世界中遨游吧！
设置运行环境
在 Unity 模板中安装 3D WebView 插件
- 点击此处 下载 Unity 模板。
- 将 Unity 下载到笔记本或台式机上。视频所示的模板项目已用 Unity 2020.3.28 版本进行过测试，所以如果希望复现该项目，我们建议安装该版本或其后的长期支持版本来进行。
- 打开模板后会弹出一个窗口，此时应点击 "Ignore（忽略）" 。
4. 打开模板后，你可能会留意到 Unity 提示项目中CanvasWebViewPrefabs 缺失。
请按以下步骤操作来解决这一问题。
a. 获取 Vuplex 3D WebView for Windows and macOS 插件，该插件的作用是使得 Unity 中可以嵌入网页内容。
b. 在 Unity 中，依次点击 Assets > Import Package > Custom Package，中文版本会显示为资源 > 导入包 > 自定义包。
c. 浏览到刚从官网上下载下来的 Vuplex 插件上并选择和打开该插件。
d. 在导入窗口看到 Vuplex 插件内容清单后，点击窗口右下角的 "Import（导入）" 按钮以完成导入。
e. 成功加载该插件（.unitypackage）后，在项目中应该可以看到 CanvasWebViewPrefab 已经变为蓝色，即该包已经成功导入。
将原型加载到 Unity 中
要将原型加载到 Unity 中，首先要获得原型的访问地址。如果你使用的是 ProtoPie Connect，那么照着以下的步骤进行即可。而如果你使用的是 ProtoPie Studio，那么应先将原型上传到 Cloud 中。这两种方式都可以得到同样的结果。那么下面我们开始吧！
- 将原型拖拽或导入到 ProtoPie Connect 中。以下给出的就是在视频教程中所示的测试原型。
2. 对于列表中所示的两个原型，都可以通过点击原型旁边的显示器图标实现在浏览器中打开该原型。
如果是搭配 Mac 设备来使用 Oculus 头显，那么将无法遵循以下步骤来继续进行。这种情况下应直接跳转阅读“如何将ProtoPie原型导入到Unity进行3D和VR测试”这一章节。
3. 为了使承载原型的网页背景呈现透明，首先应找到原型的网址，然后将 "&bg=transparent" 附加到网址后面。这种方式无论是对本地原型或是云端原型都会生效。例如：
- 原网址：
localhost:9981/pie?pieid=2&name=Video%20Player - 修改后的网址：
localhost:9981/pie?pieid=2&name=Video%20Player&bg=transparent
4. 回到 Unity，在 Hierarchy 窗口上，定位到 Main Canvas > CanvasWebViewPrefab。
5. 从 Inspector 窗口中找到 Initial URL (optional) 一栏，将刚才复制的网址粘贴进去。
在视频教程中，我们将 Video Player 的网址粘贴到 Main Canvas > CanvasWebViewPrefab 中，然后将 Web Stripe 的网址粘贴到 Side Canvas > CanvasWebViewPrefab 中。
6. 到了这一步，模板已经就绪了，只需点击 "Play（播放）" 按钮即可使用 Quest 头显来查看和操作项目内的各种交互。
从模板编译安卓 App 并加载到 Quest 头显上
通过 Oculus 头显链接来进行连接的方式在 MacOS 上行不通，这就导致实时预览功能不能在这样的条件下实现。但是我们仍然可以通过将模板编译为安卓 App 的方式将其加载到头显上。
1. 打开 ProtoPie Connect，在窗口底部（用户名旁边）可以找到 Connect 的本地 IP 地址。
2. 将原型在浏览器中打开后，将原型网址中的 "localhost" 替换为实际的（通常是四组数字的）IP 地址。例如：
- 原网址：
http://localhost:9981/pie?pieid=2 - 修改后的网址：
http://192.168.1.4:9981/pie?pieid=2
在测试 App 时应避免在网址中使用 "localhost" 字样，因为这会导致 App 在其他设备上无法正常工作。具体点说，在 Quest 头显上运行 App 时，App 其实并没有在 ProtoPie Connect 所在的设备（如 Mac）上运行，由此会导致 App 运行异常。
3. 将 “&bg=transparent” 字样添加到网址尾端。例如：
http://192.168.1.4:9981/pie?pieid=2&bg=transparent
4. 回到 Unity 中，在 Hierarchy 窗口中找到 Main Canvas > CanvasWebViewPrefab.
5. 从 Inspector 窗口中找到 Initial URL (optional) 并将修改后的网址粘贴进去。
在视频教程中，我们将 Video Player 的网址粘贴到 Main Canvas > CanvasWebViewPrefab 中，然后将 Web Stripe 的网址粘贴到 Side Canvas > CanvasWebViewPrefab 中。
6. 然后，保存这一 Unity 项目并点击 File（文件） > Build Settings（编译设置）...
7. 在出现的边栏菜单上选择 Android。如果是第一次运行该程序，可能会提示应先下载安卓模块。
8. 将头显连接到电脑设备上。在将头显通过 USB 连接到苹果笔记本或个人电脑时，如果有弹出窗口提示需要开启 USB 调试或数据访问权限，务必确保选择了 “允许” 的选项。
9. 在连接成功后，点击 “Refresh（刷新）” 按钮，使 Quest 头显出现在电脑界面中的在线设备一栏内。
10.刷新后，列表中就会显示可用的设备。在列表中选择你的 Quest 头显设备（如，Quest 2）以便继续操作。
11. 为 APK 文件起个你能记住的名字，然后点击 "Save（保存）”。
12. 在编译过程成功完成后，即可在 Quest 头显中访问该文件。
立即使用我们的 Unity 模板来简化 VR 原型测试
我们希望这篇教程有助于简化将 ProtoPie 原型导入 Unity 3D 的过程。通过应用我们独有的 Unity 模板，你就可以在 3D 和 VR 环境中测试和预览你的设计，享有更为充分的灵活性和交互能力。
如对我们的模板有任何疑问或意见，请联系我们的产品专家 。 我们非常乐于协助你，并为你的设计需求提供最佳解决方案，同时，我们也十分期待你可以用这一解决方案创造出令人惊叹的设计作品！