XRSession:selectstart 事件
当用户在其某个输入源上开始执行 主要操作 时,WebXR 的 selectstart
事件将发送到 XRSession
。
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 设备 API # eventdef-xrsession-selectstart |
WebXR 设备 API # dom-xrsession-onselectstart |
浏览器兼容性
BCD 表格仅在浏览器中加载