XRSession:squeezestart 事件

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

安全上下文:此功能仅在 安全上下文(HTTPS)中可用,部分或全部 支持的浏览器

当用户在其一个输入源上开始 主要挤压操作 时,WebXR 事件 squeezestart 会发送到 XRSession

主要挤压操作是指旨在表示用手抓握或挤压的操作,可以使用手柄上的触发器模拟。

语法

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

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

onsqueezestart = (event) => {};

事件类型

事件属性

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

frame 只读

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

inputSource 只读

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

描述

触发

当用户开始挤压控制器、做出模仿抓取某物的用手势或使用(挤压)触发器时触发。

用例

当用户开始挤压操作时,会发送squeezestart事件。

如果主要的挤压操作成功结束,则向会话发送一个squeeze事件。

发送squeezeend事件以指示挤压操作不再进行。无论挤压操作成功与否,都会发送此事件。

示例

以下示例使用addEventListener()为挤压事件建立处理程序:squeezestartsqueezeendsqueeze。此代码段是事件处理程序的核心,允许用户抓取场景中的对象并将其移动。

在本例中,使用单个函数来处理所有三个事件,使它们能够共享某些代码,这些代码与接收到的三个事件中的哪一个无关。只有在完成这些任务后,下面的onSqueezeEvent()函数才会将操作分派到一个专门的函数来处理。

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

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

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

function onSqueezeEvent(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 "squeezestart":
      targetObj = myBeginTracking(targetRayPose.matrix);
      break;
    case "squeeze":
      myDropObject(targetObj, targetRayPose.matrix);
      break;
    case "squeezeend":
      myStopTracking(targetObj, targetRayPose.matrix);
      break;
  }
}

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

js
xrSession.onsqueezestart = onSqueezeEvent;
xrSession.onsqueeze = onSqueezeEvent;
xrSession.onsqueezeend = onSqueezeEvent;

规范

规范
WebXR 设备 API
# eventdef-xrsession-squeezestart
WebXR 设备 API
# dom-xrsession-onsqueezestart

浏览器兼容性

BCD 表格仅在浏览器中加载