練習 - 以 MR 檢視和以 3D 檢視

已完成

Easy-Sales 是一款面向銷售的混合現實應用程序,旨在改善購物體驗。 使用此應用程序的銷售人員可以檢查和測量客戶的周圍環境,以確定哪些產品在該空間中是可行的。 他們還可以幫助客戶通過混合現實可視化產品。

我們將實作 Power Apps 的 3D 檢視MR 檢視 功能,以準確視覺化產品。

將 3D 物件新增至 SharePoint 清單

應用程式所需的 3D 模型和影像會儲存在 SharePoint 清單中。 讓我們先將所需的資源新增至此清單。

  1. 在名為 Easy Sales 的已建立 SharePoint 清單中,選取 [+ 新增資料行],然後選取 [顯示/隱藏資料行]。

    新增列的螢幕截圖。

  2. 請確定已選取 [附件],然後按頂端的 [套用]。

    套用附件的螢幕擷取畫面

  3. 選取清單中的項目,然後選取 [新增附件]。Power Apps 自訂資料夾中選取您的 3D 模型 (.glb 檔案) 或影像 (.jpg 檔案)。 對清單中的所有項目遵循相同的程序。

    新增附件的螢幕截圖

  4. 選取 [附件] 欄旁的下拉式清單,然後選取 [先顯示附件]。 我們希望將其放在第一位以便於訪問。

    螢幕截圖以選擇 首先顯示附件。

建立詳細資料頁面並新增 View in 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 模型的產品可以透過 Image 元件檢視。 若要新增「以3D檢視」元件,請選取「媒體」下拉式清單,然後選取「以3D檢視」。

    在 3D 中添加視圖的屏幕截圖。

    備註

    元件中包含預設形狀。 您可以變更 Source 屬性,將此圖形變更為另一個圖形。

  7. 將元件放在影像元件上,如圖所示,並設定 [在 3D 中檢視] 元件的 [來源] 屬性,如下所示,以從 SharePoint 清單連線 3D 模型。

    First(Gallery_products.Selected.Attachments).Value
    

    在 3D 中配置視圖的屏幕截圖。

  8. 我們將變更 [影像] 和 [檢視] 元件的 [可見] 屬性,以便根據儲存在 [附件] 欄中的 [檔案類型] 輕鬆檢視產品。 設定 3D 元件中的影像和檢視的 Visible 屬性,如下所示:

    • 圖片

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

      更改圖像可見性的屏幕截圖。

    • 3D 視圖

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

      在 3D 可見性中更改視圖的屏幕截圖。

  9. PriceDimensionsWeightColorMaterial 標籤旁邊新增空白標籤,如圖所示,以在這些標題下顯示產品資訊。 設定這些標籤的 Text 屬性,如下所示:

    • 價格

      content.Price
      

      價格空白標籤的屏幕截圖。

    • 尺寸

      content.Dimensions
      

      維度空白標籤的螢幕擷取畫面。

    • 重量

      content.Weight
      

      重量空白標籤的螢幕截圖。

    • 顏色

      content.Color
      

      顏色空白標籤的螢幕截圖。

    • 材質

      content.PrimaryMaterial
      

      材料空白標籤的螢幕截圖。

  10. 我們將新增「 返回」 圖示以導覽至上一個畫面。 若要新增 [返回] 圖示,請展開 [圖示] 下拉式清單,然後選取 [返回] 圖示。 正確放置 [返回] 圖示,並新增下列項目來設定 OnSelect 屬性:

    Navigate('Products',ScreenTransition.Cover)
    

    新增回圖標和 OnSelect 的螢幕截圖

    請遵循相同的程序進行 Carpet_details。 相應地自訂 導航 功能。

    小提示

    若要儲存進度,請選取頂端的「 檔案 」標籤,然後選取 「儲存」 選項。 您也可以使用 Ctrl+S 來儲存進度。

    備註

    避免在Carpet_details頁面上包含「以 3D 檢視」元件。 我們不將 3D 模型用於 地毯 類別。

在 MR 元件中檢視

在 MR 中檢視 是 Power Apps 提供的混合實境功能,可讓使用者在真實環境中放置 3D 物件影像 。 應用程式所需的 3D 模型和影像會儲存在 SharePoint 清單中。 讓我們先在 SharePoint 清單中新增必要的資源。

  1. 在MR中檢視 元件新增至 Product_details 畫面。 開啟 [插入] 索引標籤,然後展開 [混合實境 ] 下拉式清單,然後選取 [ 在 MR 中檢視 ] 元件。

    添加 View in MR 按鈕的屏幕截圖。

  2. [在 MR 中檢視] 元件的 [屬性] 索引標籤中,選取 [來源] 欄位並輸入以存取儲存在 SharePoint 清單中的 3D 模型:

    First(Gallery_products.Selected.Attachments).Value
    

    用於添加源以在 MR 中查看的屏幕截圖。

    備註

    我們不包括地類別的 MR 檢視功能。 相反,我們將根據在 MR 會話中測量計算的面積來估算地毯的價格。

「MR 中的檢視」元件提供的另一個唯一屬性是物件縮放。 您可以透過變更 物件寬度物件高度物件深度 屬性,從外部編輯 3D 模型的大小。

  • Property 窗格中設定以下屬性,如下圖所示:

    • 物件寬度 = 1.5
    • 物件高度 = 1
    • 物件深度 = 1
    • 測量單位 = 米

    這些值是根據此應用程序中包含的 3D 模型設置的。

    縮放物件以在 MR 中檢視的螢幕截圖。

    備註

    您也可以根據需要自訂傳遞給 物件寬度物件高度物件深度 的值。 傳遞的值以 測量單位中指定的單位取得。 從下拉式清單中選擇適當的測量單位,然後輸入值。

    小提示

    若要儲存進度,請選取頂端的「 檔案 」標籤,然後選取 「儲存」 選項。 您也可以使用 Ctrl+S 來儲存進度。

實作上述步驟將產生一個應用程式,其中包含包含詳細產品資訊的詳細資訊頁面。 該應用程序還將包括 View in 3D 組件,允許您包含 3D 內容。 您也可以透過「 在 MR 中檢視 」元件將 3D 模型放置在真實環境中。 現在您已經瞭解如何實作這些功能,您可以將它們合併到未來的應用程式中。

實現 3D 視圖和 MR 視圖後應用程序演示的動畫。