VRDisplay：requestAnimationFrame() 方法

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

非标准： 此功能是非标准的，并且不在标准跟踪中。请勿在面向 Web 的生产网站上使用它：它不会对所有用户都有效。不同实现之间也可能存在很大的不兼容性，行为将来可能会发生改变。

requestAnimationFrame() 是 VRDisplay 接口的一种特殊实现，它包含一个回调函数，该函数将在每次渲染VRDisplay 表现的新帧时被调用。

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

当VRDisplay 未呈现场景时，此功能等效于 Window.requestAnimationFrame。
当 VRDisplay 正在呈现时，回调函数将在其本机刷新率下调用。

语法

requestAnimationFrame(callback)

参数

callback: 一个回调函数，每当渲染 VRDisplay 呈现的新帧时，都会调用该函数。

返回值

一个表示 requestAnimationFrame() 调用句柄的 long 值。这可以传递给 VRDisplay.cancelAnimationFrame() 调用以取消注册回调函数。

示例

const frameData = new VRFrameData();
let vrDisplay;

navigator.getVRDisplays().then((displays) => {
  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", () => {
    vrDisplay.requestPresent([{ source: canvas }]).then(() => {
      drawVRScene();
    });
  });
});

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

  // Populate frameData with the data of the next frame to display
  vrDisplay.getFrameData(frameData);

  // You can get the position, orientation, etc. of the display from the current frame's pose
  const curFramePose = frameData.pose;
  const curPos = curFramePose.position;
  const curOrient = curFramePose.orientation;

  // Clear the canvas before we start drawing on it.

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // WebVR: Create the required projection and view matrix locations needed
  // for passing into the uniformMatrix4fv methods below

  const projectionMatrixLocation = gl.getUniformLocation(
    shaderProgram,
    "projMatrix",
  );
  const viewMatrixLocation = gl.getUniformLocation(shaderProgram, "viewMatrix");

  // WebVR: Render the left eye's view to the left half of the canvas
  gl.viewport(0, 0, canvas.width * 0.5, canvas.height);
  gl.uniformMatrix4fv(
    projectionMatrixLocation,
    false,
    frameData.leftProjectionMatrix,
  );
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.leftViewMatrix);
  drawGeometry();

  // WebVR: Render the right eye's view to the right half of the canvas
  gl.viewport(canvas.width * 0.5, 0, canvas.width * 0.5, canvas.height);
  gl.uniformMatrix4fv(
    projectionMatrixLocation,
    false,
    frameData.rightProjectionMatrix,
  );
  gl.uniformMatrix4fv(viewMatrixLocation, false, frameData.rightViewMatrix);
  drawGeometry();

  function drawGeometry() {
    // draw the view for each eye
  }

  // …

  // WebVR: Indicate that we are ready to present the rendered frame to the VR display
  vrDisplay.submitFrame();
}

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

规范

此方法是旧版 WebVR API 的一部分，已被 WebXR 设备 API 取代。它不再是标准化目标。

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

浏览器兼容性

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

另请参阅

WebVR API