创建可加载动态模型的体验
您可以创建一个其中包含多个模型且可进行动态模型切换的体验。
您需要的操作
• 访问 Vuforia Studio
• 可与体验进行关联的 ThingMark
• 访问 Experience Service
• 访问至少两个 CAD 模型 (.pvz 文件)
|
|
在本教程中，我们将使用blue_pump.pvz、Chessboard.pvz 和 Fan.pvz 作为示例。
|
步骤
1. 创建一个新项目，然后选择“移动设备 - 默认”作为模板类型。在“新建项目”窗口中输入项目名称和 Experience Service URL，然后单击“创建”。
2. 将“ThingMark”小组件拖放到工作区。
您在扫描物理 ThingMark 时，ThingMark 会确定其他 3D 增强应在体验中缩放和放置的位置。
3. 将“模型”小组件拖放到工作区。
4. 在项目窗格中，单击“资源”旁边的绿色“+”号。此时会显示“添加资源”窗口。
5. 单击“选择文件”，然后导航到要添加的 3D 模型文件。单击“打开”，然后单击“添加资源”窗口中的“添加”。文件会显示在“已上载”的下面。
6. 接着，从工作区工具栏中选择“2D”。
| 您可以使用此工具栏在“3D”和“2D”叠加之间来回切换。 |
7. 将“选择”小组件拖放到工作区的中央面板上。
8. 在“详细信息”窗格中，在“选择”小组件的“标签”字段中输入 Model。
9. 接着，我们将创建一个新的应用程序参数。单击“数据”窗格中的“应用参数”旁边的绿色加号图标。
10. 在“添加应用程序参数”窗口的“名称”字段中输入 modelSelect，然后单击“添加”。
11. 将新的应用程序参数拖放到“选择”小组件的“列表”属性中。
12. 切换回“3D”工作区。
13. 现在，单击项目树中的 select-1以在“详细信息”窗格中显示“选择”小组件的属性。将“选择”小组件的“值”属性直接拖放到模型中。在“选择绑定目标”窗口中选择“资源”，然后单击“绑定”。
14. 在“项目”窗格中单击 Home.js，然后在 JavaScript 编辑器中输入以下内容：
$scope.populateModelList = function() {
$scope.app.params.modelSelect = [
{
display: "Chessboard",
value: "app/resources/Uploaded/Chessboard.pvz"
},
{
display: "Blue Pump",
value: "app/resources/Uploaded/blue_pump.pvz"
},
{
display: "Fan",
value: "app/resources/Uploaded/Fan.pvz"
}
];
}
$scope.populateModelList();
| 您可能想要编辑 display 参数以便在“选择”小组件中显示所需的显示名称，并编辑 value 参数以便输入所用 .pvz 文件的实际文件名。例如，如果使用的 CAD 模型是圆锯、钻头和台锯，则 JavaScript 类似于以下形式： $scope.populateModelList = function() {
$scope.app.params.modelSelect = [
{
display: "Circular Saw",
value: "app/resources/Uploaded/circular_saw.pvz"
},
{
display: "Drill",
value: "app/resources/Uploaded/drill.pvz"
},
{
display: "Table Saw",
value: "app/resources/Uploaded/table_saw.pvz"
}
];
}
$scope.populateModelList(); |
15. 接着，在“项目”窗格中，单击“配置”下面的“体验”。
16. 在“编辑体验”页面上：
◦ 保持“ThingMark 关联”字段中所选的“ThingMarks”选项
◦ 在“标题”字段中输入标题
◦ 在“ThingMark”字段中输入唯一的 ThingMark ID (例如，格式为域名:ID)
17. 最后，单击“发布”。
18. 在扫描 ThingMark 时，您会看到“选择”小组件，但是没有模型。
19. 使用下拉菜单选择您想要查看的模型！
