共用方式為


在 HoloLens 2 Unity 應用程式中開始使用 WebView2 (預覽)

本教學課程適用于在沉浸式HoloLens 2 Unity 應用程式中使用 WebView2 的開發人員。

HoloLens 2上的 WebView2 和適用于 Unity 的 WebView 外掛程式都處於預覽狀態,而且在正式運作之前可能會變更。

只有執行Windows 11更新的HoloLens 2裝置才支援 WebView2。 如需詳細資訊,請參閱更新HoloLens 2

如需在 HoloLens 2 上啟用 WebView2 的 2D 應用程式,請參閱在 WinUI 2 中開始使用 WebView2 (UWP) 應用程式

在本教學課程中,您會:

  • 設定您的開發工具,以建立HoloLens 2使用 WebView2 顯示 Web 內容的 Unity 應用程式。
  • 使用 Mixed Reality 功能工具安裝 Mixed Reality 工具組。
  • 建立初始 Unity 專案以進行HoloLens 2開發。
  • 使用 Mixed Reality 功能工具,新增適用于 Unity 的 Microsoft Mixed Reality WebView 外掛程式。
  • 設定 WebView 預製專案,以在您的HoloLens 2應用程式中顯示網頁內容。
  • 瞭解 Unity 中的 WebView2 概念和互動。

已完成的專案

此消費者入門專案的完整版本可在WebView2Samples 存放庫中取得。 您可以從存放庫使用已完成的專案 (,或遵循下列步驟) 作為基準,將更多 WebView2 功能和其他功能新增至 HoloLens 2 Unity 應用程式。

此教學課程專案的完整版本可在 WebView2Samples 存放 庫中取得:

  • 範例名稱: HoloLens2_GettingStarted
  • 存放庫目錄: HoloLens2_GettingStarted
  • Unity 專案資料夾: HoloLens2GetStartedApp

請遵循以下循序的主要步驟區段。

關於 HoloLens 2、Unity、Mixed Reality Feature Tool、Mixed Reality Toolkit 和 WebView 外掛程式

藉由結合 HoloLens 2、Unity、Mixed Reality 工具組和適用于 Unity 的 WebView 外掛程式,您可以建立沉浸式混合實境體驗,以順暢地整合 Web 內容。

HoloLens 2

HoloLens 2是一個突破性的未整合全像攝影裝置,提供免持且沉浸式混合實境體驗。 HoloLens 2將數位資訊順暢地重迭到真實世界,呈現保持原位且自然回應互動的高定義全像投影。

您可以使用 Unity 遊戲引擎和 Visual Studio 來建立HoloLens 2專案。

統一

Unity是一個多功能的遊戲引擎,是建立 3D 應用程式的熱門選擇,包括適用于HoloLens 2裝置的混合實境體驗,因為其廣泛的功能和強大的功能,適用于擴增實境 (AR) 、虛擬實境 (VR) ,以及混合實境 (MR) 。

MIXED REALITY功能工具 (MRFT)

Mixed Reality功能工具 (MRFT) 是開發人員探索、更新混合實境功能套件,以及將混合實境功能套件新增至 Unity 專案的新方式。 您可以依名稱或類別搜尋套件、查看其相依性,甚至檢視專案資訊清單檔案的建議變更,再匯入。 資訊清單檔案是定義所有專案套件的 JSON 檔案。 驗證要包含的套件之後,Mixed Reality功能工具會自動將它們下載到您選取的 Unity 專案中。 本指南將使用 MRFT 來安裝Mixed Reality 工具組適用于 Unity 的 Microsoft Mixed Reality WebView 外掛程式

Mixed Reality工具組 (MRTK)

Mixed Reality工具組 (MRTK) 是 Microsoft 驅動的開放原始碼專案,可提供開發混合實境體驗的基本元件和功能,以加速 Unity 中混合實境應用程式的開發。 MRTK 提供腳本、元件和預製專案的集合,專為協助您在HoloLens 2裝置上建立高效能且直覺的混合實境體驗而設計。

適用于 Unity 的 Microsoft Mixed Reality WebView 外掛程式

適用于 Unity 的 Microsoft Mixed Reality WebView 外掛程式可讓您將 WebView2 功能整合到您的HoloLens 2應用程式中。 這個適用于 Unity 的 WebView 外掛程式可簡化 WebView2 功能與HoloLens 2應用程式的整合,方法是包裝 WebView2 控制項、自動處理轉譯,以及自動將輸入導向至 WebView2 控制項。

此外掛程式也會管理 Unity 與 WebView2 之間的互通性,透過訊息和事件啟用 JavaScript 與 Unity 之間的通訊。

在 Unity 中,您可以使用 Mixed Reality Feature Tool 來安裝適用于 Unity 的Microsoft Mixed Reality WebView 外掛程式。

步驟 1 - 安裝 Visual Studio

本教學課程假設您已安裝 Unity 2021.3 LTS 或更新版本,以及 Visual Studio 2019 16.9 版或更新版本。 不支援 Visual Studio 2017。 在此步驟中,我們將從設定您的 Visual Studio 環境以進行HoloLens 2開發開始,請遵循Mixed Reality工具安裝指南。 該文章會引導您安裝和設定必要的工具,包括 Visual Studio 和通用 Windows 平臺開發工作負載。

也請遵循為 WebView2 設定開發環境中的步驟,設定 WebView2 的開發環境

完成設定之後,請返回此頁面,並繼續進行後續步驟以安裝 Unity。

步驟 2 - 安裝 Unity 以進行HoloLens 2開發

您必須先安裝 Unity,才能開始使用 WebView2 開發HoloLens 2應用程式。 請遵循 選擇 Unity 版本和 XR 外掛程式 中的步驟,完成建置混合實境應用程式所需的工具組安裝。

步驟 3 - 設定 Unity 專案以進行Mixed Reality開發

安裝工具之後,您就可以開始建立和設定專案。 開始開發HoloLens 2最簡單的方式是在專案中使用 Mixed Reality 工具組。

Mixed Reality功能工具可簡化探索、安裝和管理混合實境功能的程式,包括Mixed Reality工具組,以及 Unity 專案的套件。 如需安裝Mixed Reality功能工具的詳細指引,請參閱歡迎使用Mixed Reality功能工具。

  1. 首先,從 Microsoft下載中心下載Mixed Reality功能工具

  2. 執行下載的 Mixed Reality Feature Tool 可執行檔,並遵循提示來安裝 Mixed Reality 工具組,以及HoloLens 2開發所需的任何其他套件。

    Mixed Reality功能工具可讓您直接在 Unity 專案中選取並安裝適當的 Mixed Reality 工具組版本及其他混合實境功能。

使用Mixed Reality功能工具安裝Mixed Reality工具組之後,工具組的資產和預製專案會出現在您的 Unity 專案中。 Mixed Reality工具組會引導您為專案設定 Open XR 外掛程式。

如需設定 Unity 專案的詳細逐步解說,請參閱使用 MRTK 設定新的 OpenXR 專案

步驟 4 - 使用 Mixed Reality 功能工具安裝適用于 Unity 的 WebView 外掛程式

在此步驟中,如上所示,您將使用Mixed Reality功能工具來安裝適用于 Unity 的 Microsoft Mixed Reality WebView 外掛程式。 這會安裝與 HoloLens 2 相容的 WebView2 NuGet 套件特定版本。

  1. 啟動您在) 上安裝的Mixed Reality功能工具 (。 隨即開啟適用于 Unity 的Mixed Reality功能工具的 [開始] 頁面,其中包含設定和檢視檔的選項:

    Mixed Reality功能工具中的 [設定設定] 按鈕

  2. 按一下齒輪按鈕。 [ 設定] 窗格隨即開啟。

  3. 按一下 [ 功能] 索 引標籤,然後確定已選取 [ 顯示預覽版本 ] 核取方塊:

    Mixed Reality功能工具的 [設定] 中的 [功能] 索引標籤

  4. 按一下 [ 確定] 按鈕以返回起始頁面。

  5. 按一下 [ 開始] 按鈕以開始探索功能套件。

  6. 將Mixed Reality功能工具指向您的 Unity 專案。 若要這樣做,請按一下 [專案路徑] 欄位右側的 [流覽專案資料夾 (...) ] 按鈕:

    在 [Mixed Reality 功能工具] 中選取 Unity 專案

  7. 在 [檔案選取] 對話方塊中,選取您的 Unity 專案資料夾,然後按一下 [ 開啟] 按鈕。

  8. 在 [ 選取專案] 對話方塊中,按一下 [ 探索功能] 按鈕。

  9. 在 [探索功能]頁面中,展開 [其他功能]區段,然後選取 [Microsoft Mixed Reality WebView] 核取方塊:

    Mixed Reality功能工具中的 [探索功能] 窗格

    這會標示用於安裝 Unity 的 WebView 外掛程式。 在 [ 版本] 下拉式清單中,預設會選取最新版的外掛程式。

  10. 按一下 [ 取得功能] 按鈕。 這會下載必要的套件。

  11. 下載套件之後,按一下 [ 匯入 ] 按鈕:

    Mixed Reality功能工具中的 [匯入功能] 窗格

  12. 在 [ 檢閱和核准 ] 頁面上,檢查對專案 manifest.json 檔所做的修改,並檢查 (的檔案清單,例如 .tgz 將複製到專案中的套件) :

    Mixed Reality功能工具中的 [檢閱和核准] 窗格

  13. 按一下 [ 核准] 按鈕以完成變更。

  14. 在 Unity 專案中的 [ 資產] 檔 夾中,檢查 WebView 預製專案。

現在已安裝並匯入適用于 Unity 的 Microsoft Mixed Reality WebView 外掛程式。 繼續進行下一個步驟。

如需詳細資訊,請參閱歡迎使用Mixed Reality功能工具。

步驟 5 - 在 Unity 場景中設定 WebView 預製專案

現在已安裝並匯入適用于 Unity 的 WebView 外掛程式,請在 Unity 場景中設定 WebView 預製專案,如下所示:

  1. 在 Unity 編輯器中,流覽至[專案]視窗,然後移至 [套>Microsoft Mixed Reality WebView (預覽>) 執行時間> 預製專案來尋找 WebView預製專案

  2. 將 WebView 預製專案拖曳到場景中。

  3. 在 [ 階層 ] 視窗中選取 WebView 預製專案後,將它移至場景內適當的起始位置 (例如節點) 底下 MixedRealitySceneContent ,確定它在預設相機的視圖中。

  4. 在 [ 偵測器 ] 視窗中,您可以變更 WebView 預製專案所載入的初始 URL。 若要這樣做,請找出 [目前 URL] 文字方塊,然後輸入所需的 URL。 根據預設,預製專案會載入 https://www.microsoft.com

    Unity Inspector 中 WebView 預製專案的目前 URL 輸入欄位

步驟 6 - 測試專案

現在您已將 WebView 外掛程式新增至場景,現在是測試專案的好時機。

  1. 若要直接在 Unity 編輯器中測試專案,請按一下 [ 播放] 按鈕:

    啟動編輯器播放模式

  2. 若要在實際裝置上測試專案,請遵循建置 和部署至 HoloLens中的步驟。

然後繼續進行下列後續步驟。

步驟 7 - 擴充 WebView2 功能

雖然預製專案只會公開單一屬性,但腳本上 WebView 會公開其他功能。 讓我們看看在專案中公開一些這項功能。 首先,檢查 WebView 腳本以瞭解可用的功能。

提示

若要在預設程式碼編輯器中檢視腳本的內容,請在 [ 偵測器 ] 視窗中按兩下腳本的名稱。

現在您已檢閱過程式 WebView 代碼,讓我們擴充範例的功能。 在此步驟的其餘部分,我們將新增一些基本功能,讓使用者將擁有 [上 一頁] 按鈕、 [移 至] 按鈕和文字欄位,以流覽至自訂 URL。

新增輸入欄位和按鈕

  1. 修改場景階層,如下所示:

    1. 在 底下 MixedRealitySceneContent ,新增輸入元件 (以滑鼠右鍵按一下 >[UI>輸入欄位 - TextMeshPro) ] 。 這會自動新增元件的父 Canvas 系。
    2. 在新的 Canvas 底下,新增個新 Button 元件 (以滑鼠右鍵按一下 >[UI>按鈕 - TextMeshPro) ] 。
    3. 重新排序 WebView 元件,使其成為元件的 Canvas 子系:

    在 Unity 中使用新元件更新場景階層

  2. 在 [ 階層 ] 窗格中選取 Canvas,然後在 [ 偵測器 ] 窗格中進行下列變更,以更新 Canvas 屬性:

    1. 寬度高度 分別變更為 600、400。
    2. XYZ的規模變更為 0.001、0.001、0.001:

    已更新 Unity 偵測器中的 Canvas 屬性

  3. 在 [ 階層 ] 窗格中選取輸入欄位的屬性,然後在 [ 偵測器 ] 窗格中進行下列變更,以更新輸入欄位的屬性:

    1. 名稱 變更為 「AddressField (TMP) 」
    2. Pos XPos YPos Z 分別變更為 -2、178、-5。
    3. WidthHeight 分別變更為 390、30:

    Unity 的 Inspector 中已更新輸入欄位屬性

  4. 更新第一個按鈕的屬性,方法是在 [ 階層 ] 窗格中選取它,然後在 [ 偵測器 ] 窗格中進行下列變更:

    1. 名稱 變更為 「上一頁按鈕」
    2. 分別將 Pos XPos YPos Z 變更為 -248、178、-5。
    3. WidthHeight 分別變更為 75、30:

    Unity 的 Inspector 中已更新 [上一頁] 按鈕屬性

  5. 更新第二個按鈕的屬性,方法是在 [ 階層 ] 窗格中選取它,然後在 [ 偵測器 ] 窗格中進行下列變更:

    1. 名稱 變更為 「Go Button」
    2. Pos XPos YPos Z 分別變更為 242、178、-5。
    3. WidthHeight 分別變更為 75、30:

    Unity 的 Inspector 中已更新 Go 按鈕屬性

  6. 在 [ 階層 ] 窗格中選取 WebView 的屬性,然後在 [ 偵測器 ] 窗格中進行下列變更,以更新 WebView 的屬性:

    1. 位置>XYZ分別變更為 0、-16、-5。
    2. Scale>XYZ分別變更為 570、340、1:

    已在 Unity 的 Inspector 中更新 WebView 屬性

  7. 將背景影像新增至 Canvas

    1. 在 [ 階層 ] 窗格中選取 [畫布]。
    2. 按一下 [偵測器] 窗格底部的 [新增元件] 按鈕。
    3. 輸入 Image ,然後選取清單中的頂端結果。
    4. 按一下影像的 [色彩 ] 欄位,然後選擇背景色彩。 在我們的範例中,我們選擇了灰色。 (這只是為了顯示畫布中不同控制項之間的一些對比。)

    在 Unity 的 Inspector 中設定畫布的背景色彩

  8. 在 [ 階層] 窗格的 [ 上一頁] 按鈕下,選 取 [文字 (TMP) 。 然後在 [ 偵測器 ] 窗格中,將 [文字輸入 ] 變更為 [上一步]

    在 Unity 的 Inspector 中將按鈕的文字變更為 [上一頁]

  9. 針對 [ Go 按鈕] 重複上述程式,並以文字取代 Go

    您現在應該會有如下所示的場景:

    Unity 場景檢視中的目前場景

新增程式碼以連結按鈕

既然我們已設計 UI,我們現在將建立用來連結按鈕的程式碼。 若要這樣做,我們將建立衍生自 Microsoft.MixedReality.WebView 的新腳本。

  1. 在 WebView 的 [ 偵測器 ] 視窗中,按一下 [ 新增元件],選取 [新增腳本],輸入 WebViewBrowser,然後按一下 [ 建立並新增]。 您的新元件會新增至 [偵測器 ] 視窗。

  2. 在 [ 偵測器 ] 視窗中 WebViewBrowser ,按兩下腳本以編輯腳本。

  3. 以下列程式碼取代該檔案的內容:

    using Microsoft.MixedReality.WebView;
    using UnityEngine.UI;
    using UnityEngine;
    using TMPro;
    using System;
    
    public class WebViewBrowser : MonoBehaviour
    {
       // Declare UI elements: Back button, Go button, and URL input field
       public Button BackButton;
       public Button GoButton;
       public TMP_InputField URLField;
    
       private void Start()
       {
          // Get the WebView component attached to the game object
          var webViewComponent = gameObject.GetComponent<WebView>();
          webViewComponent.GetWebViewWhenReady((IWebView webView) =>
          {
                // If the WebView supports browser history, enable the Back button
                if (webView is IWithBrowserHistory history)
                {
                   // Add an event listener for the Back button to navigate back in history
                   BackButton.onClick.AddListener(() => history.GoBack());
    
                   // Update the Back button's enabled state based on whether there's any history to go back to
                   history.CanGoBackUpdated += CanGoBack;
                }
    
                // Add an event listener for the Go button to load the URL that was entered in the input field
                GoButton.onClick.AddListener(() => webView.Load(new Uri(URLField.text)));
    
                // Subscribe to the Navigated event to update the URL input field whenever a navigation occurs
                webView.Navigated += OnNavigated;
    
                // Set the initial value of the URL input field to the current URL of the WebView
                if (webView.Page != null)
                {
                   URLField.text = webView.Page.AbsoluteUri;
                }
          });
       }
    
       // Update the URL input field with the new path after navigation
       private void OnNavigated(string path)
       {
          URLField.text = path;
       }
    
       // Enable or disable the Back button based on whether there's any history to go back to
       private void CanGoBack(bool value)
       {
          BackButton.enabled = value;
       }
    }
    
  4. 將 UI GameObjects 連接到 WebViewBrowser 我們剛才撰寫的程式碼:

    1. 選取 WebViewBrowser
    2. [上一頁] 按鈕 從 [階層] 窗格拖曳至 [偵測器] 中 WebView 瀏覽器的 [ 上一頁] 變數欄位。
    3. 將 [階層] 窗格中的 [執行按鈕 ] 拖曳至 [偵測器] 中 WebView 瀏覽器的 [ Go Button ] 變數欄位:

    在 Unity 的 Inspector 中,具有已指派變數的 WebView 瀏覽器預製專案

  5. 您現在可以在 Unity 編輯器中測試場景。 在場景中連接所有專案之後,您應該能夠確認所有專案都如預期般運作。 嘗試在文字方塊中 AddressField 輸入新的 URL 來測試場景, (必須是包含通訊協定) 的完整 URL,然後按 下 [執行] 按鈕。 請確定 [上一頁 ] 按鈕也可運作。

    對在 HoloLens 上執行的應用程式進行偵錯有時會很有説明,而且執行此動作的步驟與 Visual Studio 中的標準偵錯稍有不同。 如需如何設定及連線到在 HoloLens 或 Unity 編輯器內部執行之應用程式的詳細資訊,請參閱使用 Unity 進行 Managed 偵錯

另請參閱:

繼續進行下列後續步驟。

步驟 8 - 瞭解 Unity 中的 WebView2 事件和互動

適用于 Unity 的 Microsoft Mixed Reality WebView 外掛程式提供使用 Web 檢視的事件。

其中一個重要事件是 IWithPostMessage.MessageReceived ,當訊息從 Web 檢視傳送至 Unity 應用程式時會引發。 事件 MessageReceived 定義于 介面中 Microsoft.MixedReality.WebView.IWithPostMessage

IWithPostMessage 也會定義 PostMessage() 方法,可用來將訊息從 Unity 應用程式傳送至 Web 檢視。

以下是如何使用這些事件和方法來處理 Web 檢視的範例:

using Microsoft.MixedReality.WebView;

public class WebViewExample : MonoBehaviour, IWithPostMessage
{
    private void Start()
    {
        var webViewComponent = gameObject.GetComponent<WebView>();

        if (Url != string.Empty)
        {
            Debug.Log("Loading URL: " + Url);
            webViewComponent.Load(new Uri(Url));
        }

        webViewComponent.GetWebViewWhenReady((IWebView webView) =>
        {
            // Add event listeners for WebView2 events
            ((IWithPostMessage)webView).MessageReceived += OnMessageReceived;
        });
    }

    // Handler for WebView2 OnPostMessage event
    void OnMessageReceived(string message)
    {
        Debug.Log("WebView2 message received: " + message);
    }
}

HoloLens 2上 WebView2 的其他考慮

限制和已知問題

使用 WebView2 開發 HoloLens 2 Unity 應用程式時,請注意一些限制和已知問題:

  • 快顯視窗:在 HoloLens 2 上 Unity 應用程式內的 WebView2 內,快顯視窗無法正常運作,但可在裝置上的 2D XAML 應用程式中正常運作。 避免快顯視窗並使用替代技術或 UI 設計,例如使用 HTML、CSS 和 JavaScript 在 WebView 中自訂類似快顯的元素。

  • 新視窗:與桌面不同,HoloLens 2上的 WebView2 實例預設會在相同的視窗內流覽。 請遵循此預設行為,以獲得更好的使用者體驗。 此外,無法啟動 DevTools 視窗。

  • 企業驗證:HoloLens 2 上的 WebView2 目前不支援使用 OS 層級權杖的自動單一 Sign-On (SSO) 。 使用者仍然可以藉由提供認證來登入,但需要裝置層級驗證的情況除外。 Cookie 儲存體如預期般運作。

  • 使用者互動:不同于原生HoloLens 2平板,WebView2 最適合使用遠距互動手部光線與 之互動。 可能不支援觸控到撥動和捲動互動。

  • 能:大量使用 JavaScript 或進階轉譯的複雜網站可能會影響系統效能或主應用程式的畫面播放速率。 如需一般效能相關限制和建議,請參閱 混合實境檔中的瞭解混合實境的效 能。 另請參閱下面的 效能優化

效能優化

優化 HoloLens 2 Unity 應用程式中 WebView2 的效能,對於順暢的使用者體驗至關重要。 以下是一些建議:

  • 限制 WebView2 實例的數目:建議在 Unity 應用程式內只使用一個 WebView2 實例。 重複使用相同的實例,或視需要卸載並建立新的實例。 請記住,從場景中移除 WebView 預製專案可能不會終結基礎 WebView2 實例。 您必須在遊戲物件上呼叫 Destroy() 方法,才能正確地終結它。

  • 套用一般 Unity 優化技術:若要優化 WebView2 效能,請使用標準 Unity 優化方法,例如排除遮蔽或限制更新速率。 如需詳細資訊,請參閱混合實境檔中的 Unity 效能 建議

  • 分析及監視 WebView2 效能:有數種方式可分析 HoloLens 2 Unity 應用程式的效能:

    • Unity Profiler:Unity 中的內建工具,可讓您測量及優化應用程式在各種平臺上的效能,包括HoloLens 2。

    • Visual Profiler:Mixed Reality工具組的功能,可提供應用程式效能的應用程式內檢視。

    • PIX:適用于 Windows 的效能微調和偵錯工具,也可用來分析HoloLens 2上的 Unity 應用程式。

步驟 7 - 擴充 WebView2 功能中,我們觸及了一些流覽方法。 在本節中,我們將展開所學到的內容。

另請參閱:

IWebView 介面

IWebView 口會公開一些與頁面導覽相關的方法、事件和屬性。 此處公開的主要功能是使用 Load(Uri url) 巡覽至指定 URL 的能力:

public interface IWebView
{
    // Non-navigation methods are removed for clarity.

    event WebView_OnNavigated Navigated;

    Uri Page { get; }

    void Load(Uri url);

    void Reload(bool ignoreCache);
}
IWithBrowserHistory 介面

IWithBrowserHistory 口會公開一些與頁面導覽相關的方法和事件。 這主要可讓開發人員向前和向後流覽,如同您預期的一般網頁流覽體驗:

public interface IWithBrowserHistory : IWebView
{
    // Non-navigation methods are removed for clarity.

    event WebView_OnCanGoForwardUpdated CanGoForwardUpdated;

    event WebView_OnCanGoBackUpdated CanGoBackUpdated;

    void GoBack();

    void GoForward();
}
SetVirtualHostNameToFolderMapping 和 SetVirtualHostMapping

CoreWebView2.SetVirtualHostNameToFolderMapping 方法可啟用虛擬主機名稱與資料夾路徑之間的對應,讓網站可以使用該主機名稱存取它。 這個方法會將本機功能變數名稱對應至本機資料夾,讓 WebView2 控制項在嘗試存取該網域的資源時,從指定的本機資料夾載入內容。

適用于 Unity 的 WebView 外掛程式會透過 IWithVirtualHost 具有單一方法 的 介面公開這項功能: SetVirtualHostMapping(string hostName, string folderPath)

public interface IWithVirtualHost : IWebView
{
    void SetVirtualHostMapping(string hostName, string folderPath);
}

若要使用 SetVirtualHostMapping 方法,請將 設定為 hostName 符合字串的任何有效 URL,例如 webview2.samplefolderPath 可以是絕對路徑或相對於應用程式工作目錄的路徑,例如 Assets\Html

假設我們在 底下 Assets\Html 有名為 的 demo.html HTML 檔案,下列程式碼片段會示範如何使用適用于 Unity 的 WebView 外掛程式來載入 demo.html

using Microsoft.MixedReality.WebView;

public class WebViewExample : MonoBehaviour
{
    private void Start()
    {
        var webViewComponent = gameObject.GetComponent<WebView>();

        webViewComponent.GetWebViewWhenReady((IWebView webView) =>
        {
            ((IWithVirtualHost)webView).SetVirtualHostMapping("webview2.sample", "Assets\\Html");

            // Navigate to our local content.
            webViewComponent.Load(new Uri("http://webview2.sample/demo.html"));
        });
    }
}

Input

有各種方式可處理 Unity 中混合實境應用程式的輸入。

不論 Unity 應用程式中使用的輸入系統為何,在各種應用程式輸入事件與 Unity 的 WebView 外掛程式之間都需要 Interop 程式碼。 這表示將這些事件轉譯 (例如指標事件) 物件 WebViewMouseEventData ,然後透過 IWithMouseEvent 介面將這些事件轉送至外掛程式:

public interface IWithMouseEvents : IWithInputEvents
{
    void MouseEvent(WebViewMouseEventData mouseEvent);
}

WebView2 不會察覺 Unity 的輸入系統,而且可能會有與 Unity 場景不同的座標系統。 因此,當有指標向下事件時,其座標必須轉譯成 WebView2 控制項的座標系統。 此外,指標向下事件必須轉換成適當的 WebViewMouseEventData 事件種類。

簡單範例:

using Microsoft.MixedReality.WebView;

public class WebViewExample : MonoBehaviour, IPointerDownHandler
{
    // WebView setup steps skipped for brevity

    public void OnPointerDown(PointerEventData eventData)
    {
        IWithMouseEvents mouseEventsWebView = webView as IWithMouseEvents;

        // Call hypothetical function which converts the event's x, y into the WebView2's coordinate space.
        var hitCoord = ConvertToWebViewSpace(eventData.position.x, eventData.position.y);

        WebViewMouseEventData mouseEvent = new WebViewMouseEventData
        {
            X = hitCoord.x,
            Y = hitCoord.y,
            Type = WebViewMouseEventData.EventType.MouseDown,
            Button = WebViewMouseEventData.MouseButton.ButtonLeft,
            TertiaryAxisDeviceType = WebViewMouseEventData.TertiaryAxisDevice.PointingDevice
        };

        // Propagate the event to the WebView plugin.
        mouseEventsWebView.MouseEvent(mouseEvent);
    }
}

在上述範例中,指標向下事件會轉換成 WebViewMouseEventData 物件,並轉送到 Unity 的 WebView 外掛程式。 它基本上會轉換成滑鼠向下事件。 若要建立滑鼠點選事件,必須以類似的方式處理指標事件。

在上述範例中, ConvertToWebViewSpace 是刻意未實作。

另請參閱