XRSession: cancelAnimationFrame() Methode

Eingeschränkt verfügbar

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

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.

Die cancelAnimationFrame()-Methode des XRSession-Interfaces storniert einen Animationsrahmen, der zuvor durch einen Aufruf von requestAnimationFrame angefordert wurde.

Syntax

cancelAnimationFrame(handle)

Parameter

handle: Der eindeutige Wert, der durch den Aufruf von requestAnimationFrame() zurückgegeben wurde, mit dem der Animations-Callback zuvor terminiert wurde.

Nutzungshinweise

Diese Funktion hat keine Wirkung, wenn der angegebene handle nicht gefunden werden kann.

Im folgenden Beispiel sehen wir Code, der eine WebXR-Sitzung startet, wenn immersiver VR-Modus unterstützt wird. Einmal gestartet, plant die Sitzung ihren ersten Rahmen zur Darstellung, indem sie requestAnimationFrame() aufruft.

Die am Ende gezeigte pauseXR()-Funktion kann aufgerufen werden, um die WebVR-Sitzung im Wesentlichen auszusetzen, indem jeder ausstehende Animationsrahmen-Callback storniert wird. Da jeder Rahmen-Callback den nächsten plant, beendet das Entfernen des Callbacks das Aktualisieren der WebXR-Szene.

const XR = navigator.xr;

let requestHandle = null;
let xrSession = null;

if (XR) {
  XR.isSessionSupported("immersive-vr").then((isSupported) => {
    if (isSupported) {
      startXR();
    }
  });
}

function frameCallback(time, xrFrame) {
  xrSession.requestAnimationFrame(frameCallback);

  // Update and render the frame
}

async function startXR() {
  xrSession = XR.requestSession("immersive-vr");

  if (xrSession) {
    stopButton.onclick = stopXR;
    requestHandle = xrSession.requestAnimationFrame(frameCallback);
  }
}

function pauseXR() {
  if (xrSession && requestHandle) {
    xrSession.cancelAnimationFrame(requestHandle);
    requestHandle = null;
  }
}