Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

XRSession: squeezestart-Ereignis

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.

Das WebXR-Ereignis squeezestart wird an eine XRSession gesendet, wenn der Benutzer an einer ihrer Eingabequellen eine primäre Squeeze-Aktion beginnt.

Primäre Squeeze-Aktionen sollen das Greifen oder Zusammendrücken mit den Händen darstellen. Sie können auch durch Auslöser an Handcontrollern simuliert werden.

Syntax

Verwenden Sie den Ereignisnamen in addEventListener():

js
addEventListener("squeezestart", (event) => { })

Alternativ können Sie der Event-Handler-Eigenschaft der Schnittstelle eine Funktion zuweisen:

js
onsqueezestart = (event) => { }

Ereignistyp

Ein XRInputSourceEvent. Erbt von Event.

Event XRInputSourceEvent

Beschreibung

Auslöser

Das Ereignis wird ausgelöst, wenn Benutzer beginnen, den Controller zusammenzudrücken, mit einer Handgeste das Greifen eines Gegenstands nachahmen oder einen Auslöser betätigen.

Anwendungsfälle

Das Ereignis squeezestart zeigt an, dass der Benutzer eine Squeeze-Aktion begonnen hat.

Wenn die primäre Squeeze-Aktion erfolgreich endet, wird ein squeeze-Ereignis an die Sitzung gesendet.

Ein squeezeend-Ereignis zeigt an, dass die Squeeze-Aktion nicht mehr andauert. Es wird unabhängig davon gesendet, ob die Aktion erfolgreich war.

Beispiele

Im folgenden Beispiel werden mit addEventListener() Handler für die Squeeze-Ereignisse squeezestart, squeezeend und squeeze eingerichtet. Dieser Ausschnitt bildet den Kern eines Event-Handlers, mit dem Benutzer Objekte in der Szene greifen und bewegen können.

Hier verarbeitet eine einzige Funktion alle drei Ereignisse. Dadurch können sie Code gemeinsam nutzen, der unabhängig vom empfangenen Ereignis gleich ist. Erst nach diesen gemeinsamen Aufgaben leitet die unten stehende Funktion onSqueezeEvent() die Aktion an eine spezialisierte Funktion weiter.

Nachdem geprüft wurde, ob das empfangene Ereignis ein tracked-pointer-Ereignis ist – der einzige hier verarbeitete Typ –, wird die Pose des Zielstrahls mit getPose() abgerufen.

Wenn die Pose des Zielstrahls erfolgreich abgerufen wurde, verwendet der Code den Wert der Event-Eigenschaft type, um die Verarbeitung an eine passende Funktion für das empfangene Ereignis weiterzuleiten:

  • Bei squeezestart-Ereignissen wird myBeginTracking() mit der matrix der Zielstrahl-Pose aufgerufen. myBeginTracking() würde vermutlich die Darstellung des Ziehvorgangs beginnen und anhand der Transformation mit einem Treffertest ermitteln, welches Objekt aufgenommen werden soll. myBeginTracking() gibt ein Objekt zurück, das das vom Benutzer gezogene Objekt repräsentiert.
  • Beim Empfang eines squeeze-Ereignisses wird myDropObject() mit dem Zielobjekt und der aktuellen Transformation der Zielstrahl-Pose aufgerufen. Die Funktion platziert das Objekt an seiner neuen Position in der Welt und löst gegebenenfalls weitere Effekte aus, etwa eine Animation für aufspritzendes Wasser, wenn das Objekt ins Wasser fällt.
  • Das squeezeend-Ereignis führt dazu, dass myStopTracking() mit dem gezogenen Objekt und der Transformation der abschließenden Zielstrahl-Pose aufgerufen wird.
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;
  }
}

Sie können einen Handler für diese Ereignisse auch einrichten, indem Sie den Event-Handler-Eigenschaften des XRSession-Objekts eine Funktion zuweisen, die das Ereignis verarbeitet. Beachten Sie jedoch, dass dadurch gegebenenfalls vorhandene Event-Listener ersetzt werden, die über onsqueezestart, onsqueeze und onsqueezeend hinzugefügt wurden:

js
xrSession.onsqueezestart = onSqueezeEvent;
xrSession.onsqueeze = onSqueezeEvent;
xrSession.onsqueezeend = onSqueezeEvent;

Spezifikationen

Spezifikation
WebXR Device API
# eventdef-xrsession-squeezestart
WebXR Device API
# dom-xrsession-onsqueezestart

Browser-Kompatibilität