DOM

インターフェイス

DOMPoint インターフェイス

  編集:2022.04.05 by T.A.

MS(en-US)

DOMPointオブジェクトは、座標系の2Dまたは3Dポイントを表します。最大 3 次元の座標の値が含まれます。オプションのパースペクティブ値も同様です。DOMPoint は DOMPointReadOnly に基づいていますが、そのプロパティの値を変更できます。

一般に、正の x 成分は原点の右側の位置を表し、正の y 成分は原点から下向きになり、正の z 成分は画面から外側に(つまり、ユーザーに向かって)伸びます。

コンストラクター
new DOMPoint()
ゼロ個以上の座標コンポーネントの値と、オプションで w パースペクティブ値を指定して、新しい DOMPoint オブジェクトを作成して返します。DOMPoint.fromPoint() 静的メソッドを呼び出すことにより、既存の DOMPoint、DOMPointReadOnly、またはオブジェクトを使用して新しいポイントを作成することもできます。
プロパティ

DOMPointは、その親である DOMPointReadOnly からプロパティを継承します。

DOMPoint.x
DOMPoint の x 座標。
DOMPoint.y
DOMPoint の y 座標。
DOMPoint.z
DOMPoint の z 座標。
DOMPoint.w
DOMPoint のパースペクティブ値。
メソッド

DOMPointは、その親である DOMPointReadOnly からメソッドを継承します。

静的メソッド
DOMPoint.fromPoint()
プロパティの値を提供する既存のポイント(または一致するプロパティを含むオブジェクト)を指定して、新しい可変 DOMPoint オブジェクトを作成します。
WebXR Device APIでは、DOMPointReadOnly 値を使用して位置と方向を表します。次のスニペットでは、XRSession アニメーション フレーム中に XRFrame.getViewerPose() を使用して呼び出し、結果の XRPose の変換プロパティにアクセスすることで XR デバイス(VR ヘッドセットや AR 機能を備えた電話など)のポーズを取得できます。これには、2 つの DOMPointReadOnly 属性が含まれています。ベクトルとしての位置とクォータニオンとしての方向です。
function onXRFrame(time, xrFrame) {
  let viewerPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (viewerPose) {
    let position = viewerPose.transform.position;
    let orientation = viewerPose.transform.orientation;

    console.log('XR Viewer Position: {x: ' + roundToTwo(position.x)
                                 + ', y: ' + roundToTwo(position.y)
                                 + ', z: ' + roundToTwo(position.z));

    console.log('XR Viewer Orientation: {x: ' + roundToTwo(orientation.x)
                                    + ', y: ' + roundToTwo(orientation.y)
                                    + ', z: ' + roundToTwo(orientation.z)
                                    + ', w: ' + roundToTwo(orientation.w));
  }
}

テスト
HTML:

ここに表示
スクリプト組み込み:



スクリプト:


スクリプト:



表示内容:
表示内容: