XRSession:squeezestart 事件

可用性有限

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

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

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

WebXR 事件 squeezestart 在用户开始对其输入源之一执行主要挤压操作时,会发送给 XRSession

主要挤压操作是指用于表示用手抓握或挤压的操作,也可以通过手柄上的扳机来模拟。

语法

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

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

onsqueezestart = (event) => { }

事件类型

一个 XRInputSourceEvent。继承自 Event

Event XRInputSourceEvent

事件属性

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

frame 只读

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

inputSource 只读

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

描述

触发

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

用例

发送 squeezestart 事件,表示用户已开始挤压操作。

如果主要挤压动作成功结束,则会话会收到一个 squeeze 事件。

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

示例

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

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

在检查以确保收到的事件是 tracked-pointer 事件(这里唯一处理的事件类型)后,使用 getPose() 获取目标射线姿势。

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

  • 对于 squeezestart 事件,会调用 myBeginTracking() 函数,并将目标射线姿势的 matrix 作为参数传入。myBeginTracking() 函数可能会启动对象拖动过程的演示,使用变换执行命中测试,确定要拾取的对象。myBeginTracking() 返回一个表示用户已开始拖动的对象。
  • 收到 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 Device API
# eventdef-xrsession-squeezestart
WebXR Device API
# dom-xrsession-onsqueezestart

浏览器兼容性