このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

VREyeParameters

Deprecated

Avoid using this feature in new projects. Development of the WebVR API halted in favor of WebXR. This feature may be a candidate for removal from web standards or browsers.

Consider using the following features instead: WebXR.

非標準: この機能は標準化されていません。非標準の機能はブラウザーの対応が限られ、将来的に変更または削除される可能性があるため、本番環境での使用は推奨されません。ただし、標準の選択肢が存在しない特定のケースでは、有効な代替手段となる場合があります。

VREyeParametersWebVR API のインターフェイスで、指定した目のためにシーンを正しくレンダリングするためのすべての情報(視界の情報を含む)を表します。

メモ: このインターフェイスは古い WebVR API の一部でした。これは WebXR 機器 API に置き換えられました。

このインターフェイスは VRDisplay.getEyeParameters() メソッドを通じてアクセスできます。

警告: このインターフェイスは、ビューおよび投影行列を計算するために使用すべきではありません。ハードウェアの互換性を可能な限り確保するために、VRFrameData で指定された行列を使用してください。

インスタンスプロパティ

VREyeParameters.offset 読取専用

ユーザーの目と目の間の中心点から目の中心までのオフセットを、メートル単位で表します。

VREyeParameters.fieldOfView 読取専用

ユーザーの瞳孔間距離 (IPD) の調整により変化する、目の現在の視野角を記述します。

VREyeParameters.renderWidth 読取専用

それぞれの目のビューポートの推奨レンダーターゲットの幅をピクセル単位で記述します。

VREyeParameters.renderHeight 読取専用

それぞれの目のビューポートの推奨レンダーターゲットの高さをピクセル単位で記述します。

js
navigator.getVRDisplays().then((displays) => {
  // If a display is available, use it to present the scene
  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(() => {
      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);

      drawVRScene();
    });
  });
});

仕様書

このインターフェイスは古い WebVR API の一部であり、これは WebXR 機器 API で置き枯れられました。標準規格になる見込みはありません。

すべてのブラウザーが新しい WebXR API を実装するまで、 A-FrameBabylon.jsThree.js などのフレームワークを使用するか、ポリフィルを使用することが、すべてのブラウザーで動作する WebXR アプリを開発する上で推奨されます。[1]

ブラウザーの互換性

関連情報