VRDisplay.cancelAnimationFrame()

非推奨

この機能を新しいプロジェクトで使用することは避けてください。 Development of the WebVR API halted in favor of WebXR. この機能は、ウェブ標準やブラウザーから除去される可能性があります。

代わりに使用を検討すべき機能として、 WebXRがあります。

完全な互換性情報を見る
もっと詳しく

cancelAnimationFrame() は VRDisplay インターフェイスのメソッドで、 Window.cancelAnimationFrame の特別な実装であり、 VRDisplay.requestAnimationFrame() で登録したコールバックを登録解除します．

メモ: このプロパティは、古い WebVR API の一部でした。 WebXR Device 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(function(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', function() {
        if(btn.textContent === 'Start VR display') {
          vrDisplay.requestPresent([{ source: canvas }]).then(function() {
            console.log('Presenting to WebVR display');

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

            var leftEye = vrDisplay.getEyeParameters('left');
            var 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 で見ることができます。