XRMediaBinding: createCylinderLayer() 方法

video

要显示的 HTMLVideoElement。

options

一个用于配置 XRCylinderLayer 的对象。该对象可以具有以下属性，并且 space 是必需的

aspectRatio 可选

一个数字，表示可见圆柱体部分的比例。它是圆柱体可见部分的宽度除以其高度的比率。宽度是通过将 radius 乘以 centralAngle 计算的。

centralAngle 可选

一个数字，表示圆柱体可见部分的角度（以弧度为单位）。默认值：0.78539 (π / 4)。

invertStereo 可选

一个布尔值，指定是否应该反转视频中每个视图的自然位置。默认值为 false。

layout 可选

一个字符串，表示视频的布局。可能的值

default

图层容纳会话的所有视图。

mono

分配一个单一的 XRSubImage 并将其呈现给两只眼睛。

stereo

用户代理决定如何分配 XRSubImage（一个或两个）以及布局（顶部/底部或左侧/右侧）。建议使用 texture-array 纹理类型用于 stereo 布局。

stereo-left-right

分配一个单一的 XRSubImage。左眼获得纹理的左侧区域，右眼获得右侧区域。此布局旨在最大限度地减少对已经处于立体声模式的内容的绘制调用（例如立体声视频或图像）。

stereo-top-bottom

分配一个单一的 XRSubImage。左眼获得纹理的顶部区域，右眼获得底部区域。此布局旨在最大限度地减少对已经处于立体声模式的内容的绘制调用（例如立体声视频或图像）。默认值为 mono。

radius 可选

一个数字，表示圆柱体的半径。默认值为 2.0。

space 必需

一个 XRSpace 对象，定义图层与用户物理环境的空间关系。

transform 可选

一个 XRRigidTransform 对象，定义相对于 space 的偏移量和方向。

一个 XRCylinderLayer 对象。

创建一个 XRMediaBinding 并使用一个 HTMLVideoElement 传递到 createCylinderLayer()。使用上面列出的选项配置四边形图层，并通过将其添加到 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