如何在3D虚拟现实中制作HMI原型

在这份分步指南中，我们将向你展示如何在 3D 虚拟现实（VR）环境中测试你的 HMI（人机界面）设计。我们使用 ProtoPie 创建交互式 HMI 原型，然后可通过 ProtoPie Connect 将其集成到 3D VR Unity 项目中，从而获得真正沉浸式的测试体验。

准备好探索流程中的每个阶段，并了解这些工具如何提升你的汽车设计质量。让我们开始这段激动人心的汽车行业 HMI 设计与原型之旅吧！

你可以查看下面的演示，看看最终效果可能是什么样子。

注册以获取有关 3D 原型设计的新闻和技巧！

视频

TL;DR

1. 创建你的 HMI 原型

2. 在 Unity 中创建项目

3. 设置 Unity 以嵌入来自 ProtoPie 的原型

4. 在 Unity 中显示原型

5. 在 ProtoPie 与 Unity 之间建立数据连接

6. 专业提示：使用此自定义模板导入你的原型

1. 创建你的 HMI 原型

要开始这一步，你需要先在 ProtoPie 中创建你的 HMI 原型。如果你已经在使用 ProtoPie 进行原型设计，那么可以跳过此步骤。如果还没有，那么请继续学习如何使用 ProtoPie 设计你自己的汽车仪表盘。

2. 在 Unity 中创建项目

1. 现在你已经创建了 HMI 原型，请在你用于 ProtoPie 的笔记本或 PC 上下载并安装 Unity。该演示使用的是 Unity 2021.3.14f1 版本，我们建议安装此版本或之后发布的任意长期支持版本。

2. 接下来，在 Unity Hub 中创建一个新项目。选择Test Track模板，并配置项目名称和位置。在安装 Unity Editor 时，Volvo 提供了这个模板，并为本演示提供所使用的 3D 环境。

你是否和我们一样对 3D 原型设计感到兴奋？那就注册以获取有关 3D 原型设计的更新和技巧。

3. 设置 Unity 以嵌入来自 ProtoPie 的 Pies（原型）

💡 我们将在 Unity 项目中嵌入一个 Webview（网页浏览器），并使用 ProtoPie Connect 的 Web Player 功能来显示 pies。

1. 在这份分步指南中，我们将使用 Unity 的 Vuplex 3D Webview for Windows and macOS 插件。与其他替代方案相比，它能让你在 3D 项目中更轻松地设置网页视图。

2. 在 Unity 中，前往 Assets > Import Package > Custom Package。找到你下载的 Vuplex 插件，选择Open，然后Import该插件到项目中。

3. 在 Unity 项目中，使用Hierarchy面板通过搜索框找到 **Canvas **对象。右键并选择Prefab > Open Asset in Context。

4. 在Hierarchy 面板中，删除 **Speed and Gear **对象，因为我们将用来自 ProtoPie 的 Pies 替换它们。

在Project 面板中，通过搜索或手动在 Assets > Vuplex > WebView> Core > Prefabs > Resources 找到CanvasWebViewPrefab。

将 **CanvasWebViewPrefab **从 Project 面板拖放到 **Hierarchy **面板中 Canvas 的下方。

5. 由于我们需要两个网页视图，再创建一个，并将它们重命名为WebViewCluster 和 **WebViewCenter。 **

WebViewCluster 将负责驾驶员前方的仪表显示，WebViewCenter 将负责驾驶员与前排乘客之间的中控显示。

6. 在 **Scene 面板 **中使用合适的工具来调整 **WebViewCluster **和WebViewCenter对象的大小与位置。

你可以查看下面两张 Inspector 面板的图片，了解我是如何调整 WebViewCluster 和 WebViewCenter 对象的。

4. 在 Unity 中显示 Pies

💡 ProtoPie Connect 可以为你的 Pies 创建网页 URL，我们将使用这些 URL 在 Unity 中显示它们。

1. 在ProtoPie Connect中，添加我们希望在 Unity 内显示的 Pies。我们使用两个 Pie：Cluster Display 和 Center Display。

你可以在下面找到云端的两个 Pie（原型）。

Cluster Display Pie

Center Display Pie

2. 该 pie 可以在网页浏览器中打开。请记下两个 pie 的URL。（如果 ProtoPie Connect 不在同一台 PC/笔记本上，请将“localhost:9981”替换为 ProtoPie Connect 左下角显示的 IP 地址，在上方截图中为 192.168.68.56:9981）

3. 在 Unity 的Hierarchy 面板中，找到我们上面创建的WebViewCluster 和 **WebViewCenter **对象。对于每个对象的Inspector 面板（右侧），找到Canvas Web View Prefab (Script)。

我们将把** Initial URL (optional)** 改为从 ProtoPie Connect 的 Web Player 获取的 pies URL。

4. 按下Play进行测试，即可看到嵌入在 Unity 中的 Pies！（你可以使用Simulator 面板获得更好的视角，并在键盘上按 C将视角切换到车内）。

💡 在此时，你在原型中进行的任何更改和编辑都会通过 ProtoPie Connect 自动同步！（只要它是 ProtoPie Connect 中添加的同一个 Pie，且 URL 不变）

5. 在 ProtoPie 与 Unity 之间建立数据连接以实现交互

💡 ProtoPie Connect 使用 socket.io 技术来实现与其他应用程序的集成。

1. 在这份分步指南中，我们将使用 itisnajim 提供的 SocketIO for Unity 库。可从 Github 下载。

2. 在** Project 面板中，进入 Assets 文件夹并在其中创建一个名为 SocketIO** 的文件夹。解压我们上面下载的 SocketIOUnity 压缩包，然后将该文件夹拖放到 Project 面板中的SocketIO文件夹内。

3. 右键点击 **Assets > SocketIO **文件夹，并创建一个C# Script。我们将其命名为SocketIOManager。

4. 将以下代码插入 SocketIOManager.cs 文件并保存。

💡 这是一个简单的桥接应用，用于连接 ProtoPie Connect 的Socket.io服务器（企业版功能）。它会向 ProtoPie Connect 传递 Socket.io 消息，从而使 Pies 能与 Unity 的数据进行交互。

5. 在Hierarchy面板中，找到Canvas对象，它是 WebViewCluster 和 WebViewCenter 对象的父对象。在Inspector面板中，找到靠下方的Add Component按钮，并添加 SocketIOManager 脚本。

6. 专业提示：使用此自定义模板导入你的原型

为了让你更轻松，我们的创意技术专家 Freddie 创建了一个 Unity 模板，可将高保真 ProtoPie 原型导入 Unity。在这里查看该模板。

7. 你已经准备好上路了！

恭喜你！你现在已经可以使用 ProtoPie Connect 和 Unity 在 3D 虚拟现实环境中测试你的 HMI 设计了。

利用这些强大的工具创建沉浸式、可交互的原型，将你的汽车原型设计与测试流程提升到新的高度。准备好在虚拟现实世界中释放你设计的全部潜力吧。

用 ProtoPie 彻底革新你的汽车设计！

立即免费开始使用 ProtoPie，释放你的汽车设计和 HMI 原型项目的全部潜力。

祝你原型设计愉快！

[免费开始] {获取有关 3D 原型设计的更新和技巧}