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

瀏覽器相容性