VRDisplay: cancelAnimationFrame() 方法

已弃用：此功能不再推荐使用。尽管某些浏览器可能仍然支持它，但它可能已从相关的 Web 标准中删除，可能正在被删除，或者可能仅出于兼容性目的而保留。避免使用它，并尽可能更新现有代码；请参阅此页面底部的兼容性表来指导您的决定。请注意，此功能可能随时停止工作。

非标准: 此功能是非标准的，并且不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不会对每个用户都有效。不同实现之间可能存在很大的不兼容性，并且行为将来可能会发生变化。

cancelAnimationFrame() 方法是 VRDisplay 接口的特殊实现，它是 Window.cancelAnimationFrame 的特殊实现，用于取消注册使用 VRDisplay.requestAnimationFrame() 注册的回调。

注意: 此方法是旧的 WebVR API 的一部分。它已被 WebXR 设备 API 取代。

语法

cancelAnimationFrame(handle)

参数

handle: 您要取消注册的 VRDisplay.requestAnimationFrame() 调用返回的句柄。

返回值

无 (undefined).

示例

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawScene();

// WebVR: Check to see if WebVR is supported
if (navigator.getVRDisplays) {
  console.log("WebVR 1.1 supported");
  // Then get the displays attached to the computer
  navigator.getVRDisplays().then((displays) => {
    // If a display is available, use it to present the scene
    if (displays.length > 0) {
      vrDisplay = displays[0];
      console.log("Display found");
      // Starting the presentation when the button is clicked: It can only be called in response to a user gesture
      btn.addEventListener("click", () => {
        if (btn.textContent === "Start VR display") {
          vrDisplay.requestPresent([{ source: canvas }]).then(() => {
            console.log("Presenting to WebVR display");

            // Set the canvas size to the size of the vrDisplay viewport

            const leftEye = vrDisplay.getEyeParameters("left");
            const rightEye = vrDisplay.getEyeParameters("right");

            canvas.width =
              Math.max(leftEye.renderWidth, rightEye.renderWidth) * 2;
            canvas.height = Math.max(
              leftEye.renderHeight,
              rightEye.renderHeight,
            );

            // stop the normal presentation, and start the vr presentation
            window.cancelAnimationFrame(normalSceneFrame);
            drawVRScene();

            btn.textContent = "Exit VR display";
          });
        } else {
          vrDisplay.exitPresent();
          console.log("Stopped presenting to WebVR display");

          btn.textContent = "Start VR display";

          // Stop the VR presentation, and start the normal presentation
          vrDisplay.cancelAnimationFrame(vrSceneFrame);
          drawScene();
        }
      });
    }
  });
} else {
  info.textContent = "WebVR API not supported by this browser.";
}

function drawVRScene() {
  // WebVR: Request the next frame of the animation
  vrSceneFrame = vrDisplay.requestAnimationFrame(drawVRScene);

  // …
}

注意: 您可以在 raw-webgl-example 中看到完整的代码。

规范

此方法是旧的 WebVR API 的一部分，已被 WebXR 设备 API 取代。它不再有成为标准的轨道。

在所有浏览器都实现新的 WebXR API 之前，建议依赖框架，例如 A-Frame、Babylon.js 或 Three.js，或者 polyfill，来开发将在所有浏览器中运行的 WebXR 应用程序 [1]。

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参见

WebVR API