共用方式為

將 WebSlate 新增至您的環境

  • 發行項

概觀

顯示 Web 內容並與其互動概觀

在 Mesh 工具組中，我們想要使用的 WebSlate Prefab 稱為 WebSlateFramed。 它包含 URL 參數，您可以指定要控制 WebSlate 顯示的內容。 它也隨附一個元件，可讓事件召集人 實時變更WebSlate 的URL。 當包含 WebSlate 的 Mesh 事件啟動時，WebSlate 會使用您提供的 URL 載入其內容。

注意事項

  • Mesh 工具組中也有名為 WebSlate 的 Prefab，但它不支持即時更新 Mesh 事件中的 URL，因此不建議這麼做。

  • WebSlate 的大小和形狀會符合其放置的四個 GameObject 的大小和形狀。 一般而言，這是 WebSlate 預製物內部的四邊形烤制。

  • 您可以將多個 WebSlate 新增至場景。 以 Mesh 為基礎的 Mesh 事件中的用戶數目不會影響 WebSlate 效能;WebSlate 資源會在用戶的計算機上本機初始化。

新增 WebSlate

從功能表新增 WebSlateFramed 預製專案

  1. 在 [ 階層] 內部按下滑鼠右鍵，然後在操作功能表中，選取 [Mesh Toolkit>WebSlateFramed]。

    提示：您也可以按兩下 [階層] 視窗左上方的 [+] 按鈕，以查看相同的功能表。

    搜尋 WebSlate 之後結果清單的螢幕快照。

搜尋並新增 WebSlateFramed 預製專案

  1. 在 [搜尋] 欄位中，輸入 「WebSlateFramed」。。請確定您已選取 [ 所有 篩選]。

    搜尋 WebSlate 之後結果清單的螢幕快照。

  2. 將您想要的預製專案拖曳到 [場景] 檢視或 [階層]。

指定預設URL

  1. 在 [階層] 中，展開 [WebSlateFramed GameObject]，然後選取其名為 WebSlate 的子物件。

    階層中醒目提示 WebSlate 的 WebSlateFramed 子物件的螢幕快照。

  2. 在偵測器中，流覽至 WebSlate 元件。

  3. 將 [ 目前 URL ] 字段更新為您希望 WebSlate 在 Mesh 事件中預設載入的 URL。

    醒目提示 WebSlate 之 [目前 URL] 字段的螢幕快照。

在事件中讓 WebSlate 成為可控制的

當您將 WebSlate 新增至您的環境時，您會為其設定預設 URL，但如果活動召集人想要使用 控制台 實時變更 URL，該怎麼辦？ 為了容納這一點， WebSlateFramed Prefab 隨附名為 WebSlate 可控制的元件。 它也隨附物件 可 控制元件，可讓活動召集人在活動期間啟用或停用WebSlate。

WebSlates 的可控制功能可讓環境建立者保留環境的設計和美學，同時讓執行多個活動的召集人（作為範本或不做為範本）根據其活動的主題來變更內容。 請注意，可控制的 URL 只能在即時活動期間新增或變更。 自定義期間新增的 URL 不會儲存（在編輯模式中），因此不會跨多個事件保存;每次在 Unity 中，開發人員都會預設為 WebSlates 新增的 URL。

透過這項功能，WebSlates 提供下列功能：

  • 活動召集人：切換 URL、可見度（開啟/關閉）和（選擇性） 防止暫停 （保持 WebSlates 永遠開啟）。 召集人可以使用主機面板在活動期間變更URL;這會立即更新事件中所有使用者的 WebSlates （全域重新整理）。 
  • 活動出席者：當出席者使用游標或控制器將滑鼠停留在WebSlate上時，具有內建重新整理按鈕的功能表欄和簡短說明WebSlates的單一用戶本質的工具提示隨即出現（某些Web應用程式可能會提供共享體驗）。 這提供一種方式，以在用戶流覽時返回召集人所設定的URL，並可在Web應用程式發生事件期間發生問題時使用。 

新增可控制的名稱和預設URL

注意：如果您在現有的環境中已經有 WebSlateFramed 預製專案，若要取得可控制的功能，請將 Mesh 工具組升級至 24.10 版或更新版本。 這麼做之後，您可以從下面的步驟 3 開始。

  1. 在 [ 階層] 中，選取您新增的 WebSlateFramed 預製專案。

    階層中醒目提示之 WebSlateFramed 預製專案清單的螢幕快照。

  2. 在偵測器中，流覽至 WebSlate 可控制元件，然後在 [顯示名稱] 欄位中新增可控制的名稱。 確定名稱會提供環境中WebSlate函式的一些指示;這是召集人會在 控制台 中看到的內容，並在需要時用來即時更新 WebSlate。 在此範例中，我們將使用「Azure 儀錶板」。

    階層中醒目提示之 WebSlateFramed 預製專案清單的螢幕快照。

  3. 在物件可控制元件中，以相同方式提供名稱。

  4. 在 [階層] 中，展開 [WebSlateFramed] 元件，然後選取其名為 WebSlate 的子物件。

  5. 在 Inspector 中，將 [目前 URL] 欄位更新為您希望 WebSlate 在 Mesh 事件中預設載入的 URL。

    階層中醒目提示之 WebSlate 子對象的螢幕快照。

  6. 在播放模式中測試 WebSlate ，以確保 URL 正確顯示。

其他 WebSlate 可控制設定

醒目提示 [防止暫停] 設定的 WebSlate 可控制元件清單的螢幕快照。

防止暫停（WebSlate 可控制元件）：此設定會顯示在 控制台 中，且預設設定為關閉。 這表示，如果出席者離開 WebSlate，且 WebSlate 不再在其檢視中 30 秒或更長的時間，則 Webslate 會自動暫停以節省記憶體。 如果 WebSlate 再次進入出席者的檢視，則會重載。

在某些情況下，無論出席者在活動中的位置為何，內容可能需要播放（例如，如果 WebSlate 正在執行即時串流內容）。 在此情況下，最好開啟 [防止暫停] 設定。

活動召集人可以在活動中開啟和關閉此設定。 如果您想要將預設設定變更為 [開啟]，請選取 [ 防止暫停 ] 複選框。

背板 （WebSlate 可控制元件）：WebSlateFramed Prefab 隨附於此處選取的 *Backplate GameObject，以提供“frame”。 您可以將此變更為 「無」以關閉框架，但建議您保持此設定，並將它保留至活動召集人，以開啟或關閉Backplate。

可見（物件可控制元件）：此設定也會出現在 控制台 中，其中 Event Organier 可以切換所有活動出席者開啟或關閉 WebSlates 的可見度。 如果您想要將預設值設為 「可見」，請選取此選項。

注意：如果這些設定在事件期間有任何一項變更，則所有用戶的變更將會即時反映。

測試 Mesh 事件中的可控制

測試 WebSlate 的完整可控制功能只能在 Mesh 事件中發生。 在我們的範例事件中，根據您的環境，我們的範例可控制WebSlate“Azure 儀錶板”會出現在 控制台 中。

醒目提示可控制 Webslate 的 控制台 螢幕快照。

活動召集人可以按兩下 Azure 儀錶板上的向下箭號來檢視 URL，然後可以變更 URL。

醒目提示 WebSlate 的可編輯 URL 的 控制台 螢幕快照。

如先前所述，召集人可以在活動期間變更 WebSlate 的數個設定，例如[防止暫停]、[顯示背板] 和 [可見] （開啟/關閉）。

醒目提示 WebSlate 各種功能的 控制台 螢幕快照。

WebSlate 功能表

當任何人（使用者或召集人）接近 WebSlate，並使用游標或 VR 控制器將滑鼠停留在它上方時，WebSlate 功能表隨即出現。

醒目提示 WebSlate 各種功能的 控制台 螢幕快照。

重新整理 （左按鈕）：出席者可以按下此選項，將其個人檢視傳回 WebSlate 的預設網頁。

資訊（右鍵）：這會提供工具提示，提醒出席者，除非 WebSlate 顯示共同作業 Web 應用程式，否則他們所看到的內容是獨一無二的，而不會與其他出席者共用。

提示

  • 您可以將WebSlate.cs新增為腳本元件直接新增至您選擇的 3D 物件，並將 UnlitWebSlate.mat 新增至 MeshRenderer 材質，將 WebSlate 放在四邊形以外的 GameObjects 上。 請注意，這可能會導致視覺紋理延展、反轉和/或旋轉。

  • WebSlate 會載入預設 URL。 您應該將此 URL 取代為您偏好用於每個 WebSlate 的 URL。 brightness 參數設定為 1.0（瀏覽器亮度的 100%） 。

  • WebSlates 會在關閉螢幕太久后自動暫停自己。 如果您需要確保指定的 WebSlate 一律執行（例如即時串流或連續音訊播放），請在 WebSlate 元件中，選取 [防止暫停]。 請注意，這樣做可能會導致場景耗用更多資源，因為 WebSlate 會隨時保持作用中。

  • 若要將影像 URL 的大小調整為 WebSlate 的大小，請將 URL 包裝在 HTML 中。 透過可視化腳本使用 WebSlate LoadHTML API，將此 HTML 內容轉譯到您的 WebSlate。 將建構的 HTML 新增至 HTMLContent 屬性。 或者，您可以使用 LoadHTMAsset API，並以資產的形式傳遞 HTML。 將影像 URL 取代為您的影像 URL。

    使用 LoadHTML 和 LoadHTMLAsset API 搭配影像 URL 和可視化腳本圖形的範例 HTML：

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>

    顯示如何設定 Visual Scripting 以使用 LoadHTML API 的螢幕快照。

    顯示如何設定 Visual Scripting 以使用 LoadHTMLAsset API 的螢幕快照。

下一步

測試您的 WebSlate