XRSession:selectstart 事件

实验性: 这是一个 实验性技术
在生产环境中使用此功能前,请仔细查看 浏览器兼容性表

安全上下文:此功能仅在 安全上下文(HTTPS)中可用,且仅在一些或所有 支持的浏览器 中可用。

当用户在其某个输入源上开始执行 主要操作 时,WebXRselectstart 事件将发送到 XRSession

beforexrselect 事件在此事件之前触发,并且可以阻止此事件的触发。

语法

在诸如 addEventListener() 的方法中使用事件名称,或设置事件处理程序属性。

js
addEventListener("selectstart", (event) => {});

onselectstart = (event) => {};

事件类型

事件属性

除了下面列出的属性外,父接口 Event 的属性也可用。

frame 只读

一个 XRFrame 对象,提供有关事件发生期间的事件帧所需的信息。此帧可能已在过去渲染,而不是当前帧。因为这是一个事件帧,而不是一个动画帧,所以您不能在上面调用 XRFrame.getViewerPose();而是使用 getPose()

inputSource 只读

一个 XRInputSource 对象,指示哪个输入源生成了输入事件。

描述

触发

当用户按下触发器或按钮、轻触触控板、说出命令或在使用具有加速度计的视频跟踪系统或手持控制器时执行可识别的姿势时触发。

用例

selectstartselectend 事件会告诉您何时可能需要向用户显示某些内容,以指示主要操作正在进行。这可能是以新颜色绘制带有激活按钮的控制器,或者显示目标对象被抓取并四处移动,从 selectstart 到达时开始,到收到 selectend 时停止。

select 事件告诉您的代码用户已完成他们想要完成的操作。这可能很简单,例如在游戏中投掷物体或扣动枪的扳机,也可能很复杂,例如将拖动的物体放置到新的位置。

如果您的主要操作是一个简单的触发操作,并且在触发器处于激活状态时不需要进行任何动画,则可以忽略 selectstartselectend 事件,并在开始事件上执行操作。

示例

以下示例使用 addEventListener() 为选择事件建立处理程序:selectstartselectendselect。此代码段是事件处理程序的核心,允许用户抓取场景中的对象并四处移动它们。

在这种情况下,单个函数用于处理所有三个事件,允许它们共享某些代码,无论收到这三个事件中的哪一个,这些代码都是相同的。只有在完成这些任务后,下面的 onSelectionEvent() 函数才会将操作分派到专门的函数以进行处理。

在检查以确保接收到的事件是 tracked-pointer 事件(我们在此处处理的唯一一种)之后,使用 getPose() 获取目标射线的姿态。

如果成功获取了目标射线姿态,则代码使用 Event 属性 type 的值将控制权路由到适当的函数以处理到达的事件。

  • 对于 selectstart 事件,会使用目标射线姿态的 matrix 调用 myBeginTracking() 函数。myBeginTracking() 函数可能会开始对象拖动过程的呈现,使用变换执行命中测试,确定要拾取哪个对象。myBeginTracking() 返回一个表示用户开始拖动的对象的物件。
  • 收到 select 事件后,会使用目标对象和当前目标射线姿态变换作为输入调用 myDropObject() 函数。这会将对象放置到世界中的新位置,并触发可能出现的任何效果,例如如果掉入水中则安排水花动画等。
  • selectend 事件会导致调用 myStopTracking() 函数,并传入正在拖动的对象和最终目标射线姿态的变换。
js
xrSession.addEventListener("selectstart", onSelectionEvent);
xrSession.addEventListener("select", onSelectionEvent);
xrSession.addEventListener("selectend", onSelectionEvent);

function onSelectionEvent(event) {
  let source = event.inputSource;
  let targetObj = null;

  if (source.targetRayMode !== "tracked-pointer") {
    return;
  }

  let targetRayPose = event.frame.getPose(source.targetRaySpace, myRefSpace);
  if (!targetRayPose) {
    return;
  }

  switch (event.type) {
    case "selectstart":
      targetObj = myBeginTracking(targetRayPose.matrix);
      break;
    case "select":
      myDropObject(targetObj, targetRayPose.matrix);
      break;
    case "selectend":
      myStopTracking(targetObj, targetRayPose.matrix);
      break;
  }
}

您还可以通过将 XRSession 对象的 onselectend 事件处理程序属性设置为处理该事件的函数来设置 selectend 事件的处理程序。

js
xrSession.onselectstart = onSelectionEvent;
xrSession.onselect = onSelectionEvent;
xrSession.onselectend = onSelectionEvent;

规范

规范
WebXR 设备 API
# eventdef-xrsession-selectstart
WebXR 设备 API
# dom-xrsession-onselectstart

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅