XRSession: selectstart 事件
當用戶在 WebXR XRSession 的輸入源之一上開始 主要操作 時,會向該 XRSession 傳送 selectstart 事件。
在 beforexrselect 事件觸發後,會引發此事件,並且可以阻止此事件被觸發。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱,或設定事件處理程式屬性。
addEventListener("selectstart", (event) => { })
onselectstart = (event) => { }
事件型別
一個 XRInputSourceEvent。繼承自 Event。
事件屬性
除了下面列出的屬性之外,父介面 Event 的屬性也可使用。
frame只讀-
一個
XRFrame物件,提供事件發生期間所需的事件幀資訊。此幀可能是在過去渲染的,而不是當前的幀。因為這是一個事件幀,而不是動畫幀,所以您不能在其上呼叫XRFrame.getViewerPose();而是使用getPose()。 inputSource只讀-
一個
XRInputSource物件,指示是哪個輸入源生成了此輸入事件。
描述
觸發
當用戶按下觸發器或按鈕、點選觸控板、說出指令或在使用影片跟蹤系統或帶有加速計的手持控制器時執行可識別的手勢時觸發。
用例
selectstart 和 selectend 事件會告知您何時可能需要向用戶顯示指示主要操作正在進行的指示。這可能是用新顏色繪製帶有啟用按鈕的控制器,或在 selectstart 到達時顯示目標物件被抓取並四處移動,並在收到 selectend 時停止。
事件會告知您的程式碼使用者已完成他們想要完成的操作。這可能像在遊戲中扔出物件或扣動槍的扳機一樣簡單,或者像將拖動的物件放置在新的位置一樣複雜。select
如果您的主要操作是一個簡單的觸發器操作,並且您在觸發器接合期間不需要為任何內容設定動畫,您可以忽略 selectstart 和 selectend 事件,並在開始事件上執行操作。
示例
下面的示例使用 addEventListener() 來設定選擇事件的處理程式:selectstart、selectend 和 select。此程式碼段是事件處理程式的核心,允許使用者抓取場景中的物件並移動它們。
在這種情況下,使用單個函式來處理所有三個事件,使它們可以共享某些程式碼,這些程式碼在收到三個事件中的任何一個時都是相同的。僅在完成這些任務之後,下面的 onSelectionEvent() 函式才會將操作分派到專門的函式進行處理。
在檢查以確保接收到的事件是 tracked-pointer 事件(我們在這裡處理的唯一一種)之後,目標射線姿勢使用 getPose() 獲取。
如果目標射線姿勢已成功獲取,程式碼將使用 Event 屬性 type 的值將控制路由到適當的函式來處理到達的事件。
- 對於
selectstart事件,將使用目標射線姿勢的matrix呼叫myBeginTracking()函式。myBeginTracking()函式可能會開始物件拖動過程的呈現,使用變換來執行命中測試,確定要拾取哪個物件。myBeginTracking()返回一個代表使用者開始拖動的物件的物件。 - 收到
select事件後,將使用目標物件和當前目標射線姿勢變換作為輸入呼叫myDropObject()函式。這會將物件放置在世界中的新位置,並觸發可能出現的任何效果,例如計劃在水中丟棄時的飛濺動畫等。 selectend事件導致使用正在拖動的物件和最終目標射線姿勢變換呼叫myStopTracking()函式。
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 事件的處理程式。
xrSession.onselectstart = onSelectionEvent;
xrSession.onselect = onSelectionEvent;
xrSession.onselectend = onSelectionEvent;
規範
| 規範 |
|---|
| WebXR Device API # eventdef-xrsession-selectstart |
| WebXR Device API # dom-xrsession-onselectstart |
瀏覽器相容性
載入中…