XRSession: squeeze event

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

The WebXR squeeze event is sent to an XRSession when one of the session's input sources has completed a primary squeeze action. Examples of common kinds of primary action are users pressing triggers or buttons, tapping a touchpad, speaking a command, or performing a recognizable gesture when using a video tracking system or handheld controller with an accelerometer.

For details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see Inputs and input sources.

Syntax

Use the event name in methods like addEventListener(), or set an event handler property.

js
addEventListener("squeeze", (event) => {});

onsqueeze = (event) => {};

Event type

Event properties

In addition to the properties listed below, properties from the parent interface, Event, are available.

frame Read only

An XRFrame object providing the needed information about the event frame during which the event occurred. This frame may have been rendered in the past rather than being a current frame. Because this is an event frame, not an animation frame, you cannot call XRFrame.getViewerPose() on it; instead, use getPose().

inputSource Read only

An XRInputSource object indicating which input source generated the input event.

Description

Trigger

Triggered when users are squeezing the controller, making a hand gesture that mimes grabbing something, or using (squeezing) a trigger.

Use cases

The squeezestart event indicates that the user has begun a squeeze action.

If the primary squeeze action ends successfully, the session is sent a squeeze event.

A squeezeend event is sent to indicate that the squeeze action is no longer underway. This is sent whether the squeeze action succeeded or not.

Examples

The following example uses addEventListener() to set up a handler for the squeeze event. The handler fetches the pose representing the target ray for tracked-pointer inputs and sends the pose's transform to a function called myHandleSqueezeWithRay().

This code treats the squeeze as an instantaneous action that doesn't involve tracking an ongoing activity. If you need to track a squeeze action that isn't instantaneous, listen for the squeezestart and squeezeend events to sense when the squeeze action begins and ends.

js
xrSession.addEventListener("squeeze", (event) => {
  if (event.inputSource.targetRayMode === "tracked-pointer") {
    let targetRayPose = event.frame.getPose(
      event.inputSource.targetRaySpace,
      myRefSpace,
    );
    if (targetRayPose) {
      myHandleSqueezeWithRay(targetRayPose.transform);
    }
  }
});

You can also set up a handler for squeeze events by setting the XRSession object's onsqueeze event handler property to a function that handles the event:

js
xrSession.onsqueeze = (event) => {
  if (event.inputSource.targetRayMode === "tracked-pointer") {
    let targetRayPose = event.frame.getPose(
      event.inputSource.targetRaySpace,
      myRefSpace,
    );
    if (targetRayPose) {
      myHandleSqueezeWithRay(targetRayPose.transform);
    }
  }
};

Specifications

Specification
WebXR Device API
# eventdef-xrsession-squeeze
WebXR Device API
# dom-xrsession-onsqueeze

Browser compatibility

BCD tables only load in the browser

See also