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

瀏覽器相容性

另見