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