练习 -“在混合现实中查看”和“在 3D 中查看”

已完成

Easy-Sales 是一种面向销售的混合现实应用程序,旨在改善购物体验。 使用此应用程序的销售人员可以检查和测量客户周围的情况,以确定哪些产品在空间中可行。 他们还可以帮助客户通过混合现实可视化产品。

我们将在 Power Apps 的 3DMR 功能中实现视图 ,以便准确地直观显示产品。

将 3D 对象添加到 SharePoint 列表

应用程序所需的 3D 模型和图像存储在 SharePoint 列表中。 首先,将所需的资源添加到此列表中。

  1. 在名为 Easy Sales 的已创建的 SharePoint 列表中,选择“+ 添加”列,然后选择“显示/隐藏列”。

    用于添加列的屏幕截图。

  2. 确保已选择 附件 ,然后按顶部 的“应用 ”。

    应用附件的屏幕截图

  3. 在列表中选择一个项目,然后选择 “添加附件”。 在 Power Apps 自定义文件夹中选择 3D 模型(.glb 文件)或图像(.jpg 文件)。 对列表上的所有项执行相同的过程。

    用于添加附件的屏幕截图

  4. 选择 “附件 ”列旁边的下拉列表,然后选择 “首先显示附件”。 我们希望放在第一位,以便轻松访问。

    首先选择“显示附件”的屏幕截图。

创建详细信息页并在 3D 组件中添加视图

详细信息页包括有关所选产品的所有详细信息和信息。 它让你了解产品的某些功能。 必须连接在上一部分设计的产品页以及在本部分中创建的详细信息页。 在这里,还可以使用 Power Apps 的 3D 组件中的视图 将 3D 内容添加到画布应用。 你可以旋转和放大 3D 对象以获取更好的视图。

  1. 创建两个新页面并将其重命名 为Product_detailsCarpet_details

    创建详细页面的屏幕截图。

  2. 选择 >产品 ”页和 “地毯 ”页中包含的库控件中的图标。 然后,通过在“函数”选项卡中分别添加以下行来配置 OnSelect 属性。

    Navigate(Product_details,ScreenTransition.Cover,{content : ThisItem})
    
    Navigate(Carpet_details,ScreenTransition.Cover,{content_carpets : ThisItem})
    

    导航至下一详细信息的屏幕截图。

  3. 让我们开始通过添加几个标签(例如价格维度权重颜色材料)来构建Product_details页面。 可以在标签内编辑文本,在该标签Text 属性中插入所需的文本。 相应地重命名 标签

    添加标签的屏幕截图

    注释

    可以自定义应用程序的主题、字体和调色板,以提高用户体验和外观。

  4. 插入另一个名为 “产品名称 ”的标签,以显示顶部的产品名称并 居中对齐 。 通过添加以下行来配置标签的 Text 属性:

    content.'{Name}'
    

    添加标题标签的屏幕截图。

  5. 选择 “媒体 ”下拉列表,然后选择“ 图像 ”以在 Product_details 屏幕中插入图像。 按以下方式配置 Image 属性:

    content.ImageLink
    

    添加图像的屏幕截图。

  6. 我们将视图 在 3D 组件中图像 组件重叠。 可以通过 图像 组件查看没有 3D 模型的产品。 若要在 3D 组件中添加视图,请选择“媒体”下拉列表,然后选择“在 3D 中查看”。

    在 3D 中添加视图的屏幕截图。

    注释

    组件中包含默认形状。 可以通过更改 Source 属性将此形状更改为另一个形状。

  7. 将组件放置在图像组件上,如图像中所示,并在 3D 组件中配置视图Source 属性,如下所示,以便从 SharePoint 列表中连接 3D 模型。

    First(Gallery_products.Selected.Attachments).Value
    

    在 3D 中配置视图的屏幕截图。

  8. 我们将更改 3D 组件中图像和视图的 Visible 属性,以便根据“附件”列中存储的文件类型轻松查看产品。 在 3D 组件中配置图像和视图的 Visible 属性,如下所示:

    • 图像

      If(Gallery_products.Selected.FileType = "Image", true, false)
      

      更改图像可见性的屏幕截图。

    • 在 3D 中查看

      If(Gallery_products.Selected.FileType = "Model", true, false)
      

      3D 可见性中更改视图的屏幕截图。

  9. “价格”、“ 维度”、“ 粗细”、“ 颜色”和“ 材料 ”标签旁边添加空白标签,如图像中所示,用于显示这些标题下的产品信息。 按如下所示配置这些标签的 Text 属性:

    • 价格

      content.Price
      

      价格空白标签的屏幕截图。

    • 维度

      content.Dimensions
      

      维度的空白标签的屏幕截图。

    • 权重

      content.Weight
      

      粗细的空白标签的屏幕截图。

    • 颜色

      content.Color
      

      颜色的空白标签的屏幕截图。

    • 材料

      content.PrimaryMaterial
      

      材料空白标签的屏幕截图。

  10. 我们将添加 “后退 ”图标以导航到上一个屏幕。 若要添加 “后退 ”图标,请展开 “图标 ”下拉列表,然后选择 “后退”图标。 正确定位 “后退 ”图标,并通过添加以下内容来配置 OnSelect 属性:

    Navigate('Products',ScreenTransition.Cover)
    

    添加后退图标和 OnSelect 的屏幕截图

    按照相同的过程 Carpet_details。 相应地自定义 Navigate 函数。

    小窍门

    若要保存进度,请选择顶部的“ 文件 ”选项卡,然后选择“ 保存 ”选项。 还可以使用 Ctrl+S 保存进度。

    注释

    避免在Carpet_details页上将视图包含在 3D 组件中。 我们不会将 3D 模型用于 地毯 类别。

在 MR 组件中查看

MR 中的视图 是 Power Apps 提供的混合现实功能,使用户能够在真实环境中放置 3D 对象图像 。 应用程序所需的 3D 模型和图像存储在 SharePoint 列表中。 首先,在 SharePoint 列表中添加必要的资源。

  1. MR 组件中的视图 添加到 Product_details 屏幕。 打开 “插入 ”选项卡,然后展开 “混合现实 ”下拉列表,然后选择 MR 组件 中的视图

    在 MR 按钮中添加视图的屏幕截图。

  2. MR 组件中视图的“属性”选项卡中,选择“源”字段并输入以访问存储在 SharePoint 列表中的 3D 模型:

    First(Gallery_products.Selected.Attachments).Value
    

    在 MR 中添加视图源的屏幕截图。

    注释

    我们不包括“地毯”类别的 MR 功能中的视图。 相反,我们将根据 MR 会话中度量值中计算的区域来估算地毯的价格

MR 组件中视图提供的另一个唯一属性是对象缩放。 可以通过更改 对象宽度对象高度对象深度 属性来编辑外部 3D 模型的大小。

  • “属性 ”窗格中设置以下属性,如下图所示:

    • 对象宽度 = 1.5
    • 对象高度 = 1
    • 对象深度 = 1
    • 度量单位 = 计量单位

    这些值是根据此应用程序中包含的 3D 模型设置的。

    用于缩放 MR 中视图对象的屏幕截图。

    注释

    还可以根据需要自定义传递给 对象宽度对象高度对象深度 的值。 传递的值采用度量 单位中指定的单位。 从下拉列表中选择适当的度量单位,然后输入值。

    小窍门

    若要保存进度,请选择顶部的“ 文件 ”选项卡,然后选择“ 保存 ”选项。 还可以使用 Ctrl+S 保存进度。

实现上述步骤将生成包含详细产品信息的详细信息页的应用程序。 应用程序还将在 3D 组件中包含视图 ,使你能够包含 3D 内容。 还可以通过 MR 组件中的视图 将 3D 模型放置在实际环境中。 了解如何实现这些功能后,可以将它们合并到未来的应用程序中。

在 3d 中实现视图并在 MR 中查看后,应用程序演示的动画。