XRMediaBinding: createCylinderLayer() 方法

語法

createCylinderLayer(video, options)

引數

video

要顯示的 HTMLVideoElement。

options

用於配置 XRCylinderLayer 的物件。該物件可以包含以下屬性，並且 space 是必需的。

aspectRatio 可選

一個數字，表示可見圓柱體的比例。它是圓柱體可見部分寬度與其高度之比。寬度透過將 radius 乘以 centralAngle 來計算。

centralAngle 可選

一個數字，表示圓柱體可見部分的弧度角。預設值：0.78539 (π / 4)。

invertStereo 可選

一個布林值，指定影片中每個檢視的自然位置是否應被反轉。預設為 false。

layout 可選

一個字串，指示影片的佈局。可能的值：

default

該圖層支援會話的所有檢視。

mono

分配一個 XRSubImage 物件，並將其呈現給雙眼。

stereo

使用者代理決定如何分配 XRSubImage（一個或兩個）和佈局（頂部/底部或左/右）。建議為 stereo 佈局使用 texture-array 紋理型別。

stereo-left-right

分配單個 XRSubImage。左眼獲取紋理的左側區域，右眼獲取右側區域。此佈局旨在最大限度地減少對已為立體聲（例如立體聲影片或影像）的內容的繪圖呼叫。

stereo-top-bottom

分配單個 XRSubImage。左眼獲取紋理的頂部區域，右眼獲取底部區域。此佈局旨在最大限度地減少對已為立體聲（例如立體聲影片或影像）的內容的繪圖呼叫。預設值為 mono。

radius 可選

一個數字，表示圓柱體的半徑。預設值 2.0。

space 必需

一個 XRSpace 物件，定義了圖層與使用者物理環境的空間關係。

transform 可選

一個 XRRigidTransform 物件，定義了相對於 space 的偏移和方向。

返回值

一個 XRCylinderLayer 物件。

示例

建立一個 XRCylinderLayer 以顯示影片

建立一個 XRMediaBinding，並使用傳遞給 createCylinderLayer() 的 HTMLVideoElement。使用上面列出的選項配置四方圖層，並透過將其新增到 XRSession.updateRenderState() 的 layers 渲染狀態中，將圖層呈現給 XR 裝置。

function onXRSessionStarted(xrSession) {
  const xrMediaBinding = new XRMediaBinding(xrSession);
  const video = document.createElement("video");
  video.src = "just-fascination.mp4";

  const videoLayer = xrMediaBinding.createCylinderLayer(video, {
    space: xrReferenceSpace,
  });

  xrSession.updateRenderState({
    layers: [videoLayer],
  });
}

規範

瀏覽器相容性

另見

• XRCylinderLayer