Amazon Sumerian HTML 元件 - Amazon Sumerian

本文為英文版的機器翻譯版本,如內容有任何歧義或不一致之處,概以英文版為準。

Amazon Sumerian HTML 元件

您可以使用 Amazon Sumerian HTML 組件快速新增文字和影像到場景中。所以此HTML元件會覆疊維持相同方位 (相機面向) 的 2D 視窗。所以此HTML 3D組件是場景中的 3D 物件,可以在相機周圍移動時從不同的角度檢視。

注意

HTML 3D 在 2D 場景和 VR 中運行良好,但有一些限制。HTML 2D 無法在虛擬實境中運作,並在虛擬實境模式中顯示為黑色方塊。具有 HTML 3D 組件的實體與相機之間的場景內容會正常呈現。但是,HTML 3D 組件後面沒有任何內容是可見的,所以 HTML 組件不應該使用透明度。

您可以在 HTML 元素上使用樣式屬性,或包含一個單獨的style標籤定義樣式。

HTML 2D 元件

HTML 組件添加了一個二維 HTML 文檔(一個div) 新增到場景,您可以在文字編輯器中編輯其內容。您可以將使用實體轉換來定位文件,或使用 CSS 來定義與檢視區相對的位置。

Properties
  • 以轉換移動— 使用相同實體的轉換元件,將 HTML 文件放在場景內。文件一律是相同的大小並面向相機,但可以相對於相機移動。若要將 HTML 內容放置到相對於檢視區放置到,請取消選取此選項並使用樣式屬性來設定位置。

  • 完美像素— 使用實體轉換來放置時,將 HTML 視窗貼齊最靠近的像素位置。

  • Attributes (屬性)-將 HTML 屬性新增 HTML 屬性到邊界div標籤。例如,您可以新增樣式屬性來將 HTML 內容放置到畫面上。


        HTML 元件組態

選擇 Open in editor (在編輯器中開啟) 按鈕以在文字編輯器中開啟 HTML 文件。

範例 視訊視窗
HTML 屬性
  • Attributes (屬性)styleposition:absolute;right:50px;bottom:50px

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/DqeUFGpZLUw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

          HTML 3D 影片

HTML 3D 元件

HTML 3D 組件會將類似螢幕的元素新增至您可以在場景中放置的實體。您可以使用變形元件上的 X 和 Y 比例來設定螢幕的大小。寬度和高度屬性決定了多少內容 (以像素為單位) 適合該空間。

Properties
  • Width (寬度)— HTML 內容的寬度,以像素為單位。內容的高度由圖元的 Y 比例決定。

範例 影片畫面
Transform
  • 翻譯— X: 1, Y: 5, Z: -20

  • 擴展— X: 16, Y: 9、Z:1

HTML 3D 屬性
  • Width (寬度)-1920 [高度] 會自動設定為 [1080]。

<iframe width="100%" height="100%" src="https://www.youtube.com/embed/DqeUFGpZLUw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

          範例 HTML 3D 影片

在呈現的場景中,您的 HTML 內容放置在具有使用 CSS 3D 轉換的白色背景的 div 中。您不能直接修改 div 上的樣式或其他屬性。為了確保您的內容填充組件,請將其放置在高度和寬度設置為 100% 的 div 中。

在 VR 模式中,HTML 3D 組件會以非常低的影格速率呈現。它不適合視訊,或任何經常更新或回應使用者輸入的內容。如需詳細資訊,請參閱「」瞭解 Amazon Sumerian 的 HTML 3D 元件在 Sumerian 網站上。

搭配指令碼使用 HTML 元件

您可以使用標準的 JavaScript 和 HTML 事件與 HTML 組件中的內容互動。

下列範例 HTML 和指令碼新增按鈕,使用者可以按一下以變更主機上的使用中 Amazon Lex 聊天機器人對話元件

範例 HTML 3D 元件 — 按鈕
<style> button { background-color: #4CAF50; border: none; color: white; padding: 15px 25px; text-align: center; font-size: 16px; cursor: pointer; } button:hover { background-color: green; } </style> <button id="bot1button" botname="OrderFlowers" botalias="latest" type="button">Order Flowers</button> <button id="bot2button" botname="BookTrip" botalias="latest" type="button">Book Trip</button>
範例 腳本-將事件偵聽器添加到按鈕
  • 實體— 主機或其他具有對話元件的實體。

'use strict'; function setup(args, ctx) { ctx.entityData.changeBot = function(event){ var name = event.target.getAttribute("botname"); var alias = event.target.getAttribute("botalias"); ctx.entity.dialogueComponent.updateConfig({name: name, alias: alias}) }; document.getElementById("bot1button").addEventListener('click', ctx.entityData.changeBot); document.getElementById("bot2button").addEventListener('click', ctx.entityData.changeBot); }