XRSession: selectstart 事件

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

实验性: 这是一项实验性技术
在生产中使用此技术之前,请仔细检查浏览器兼容性表格

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

当用户在 WebXR XRSession 的输入源之一上开始 主要操作 时,会向该 XRSession 发送 selectstart 事件。

beforexrselect 事件触发后,会引发此事件,并且可以阻止此事件被触发。

语法

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

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

onselectstart = (event) => { }

事件类型

一个 XRInputSourceEvent。继承自 Event

Event XRInputSourceEvent

事件属性

除了下面列出的属性之外,父接口 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 Device API
# eventdef-xrsession-selectstart
WebXR Device API
# dom-xrsession-onselectstart

浏览器兼容性

另见