DOMPoint

DOMPoint オブジェクトは、座標系における二次元または三次元の点を表します。最大三次元までの座標の値、およびオプションで視点の値も含まれます。 DOMPoint は DOMPointReadOnly に基づいていますが、そのプロパティの値を変更することができます。

一般的には、正の x 成分は原点よりも右側の位置を表し、正の y 成分は原点よりも下側の位置を表し、正の z 成分は画面の外側（言い換えれば、ユーザーの方向）に向かって広がっています。

DOMPointReadOnly DOMPoint

コンストラクター

DOMPoint()

0 個以上の座標成分の値、およびオプションとして w の視点位置を与えられた新しい DOMPoint オブジェクトを作成し、それを返します。また、既存の DOMPoint や DOMPointReadOnly 、あるいはオブジェクトを使用して、 DOMPoint.fromPoint() 静的メソッドを呼び出し、新しい点を作成することができます。

メソッド

DOMPoint には親である DOMPointReadOnly から継承したメソッドがあります。

静的メソッド

DOMPoint.fromPoint()

既存の点（または、一致するプロパティを含むオブジェクト）を指定して、そのプロパティの値を提供する、新しい変更可能な DOMPoint オブジェクトを作成します。

プロパティ

DOMPoint には親である DOMPointReadOnly から継承したプロパティがあります。

DOMPoint.x

この DOMPoint の水平座標である x です。

DOMPoint.y

この DOMPoint の垂直座標である y です。

DOMPoint.z

この DOMPoint の奥行き座標である z です。

DOMPoint.w

この DOMPoint の視点位置である w です。

例

WebXR 機器 API では、位置や向きを表すために DOMPointReadOnly 値が使用されます。以下のスニペットでは、 XR 機器（VR ヘッドセットや AR 機能付き携帯電話など）のポーズは XRSession (en-US) アニメーションフレームの中で XRFrame.getViewerPose() (en-US) を呼び出すことで取得することができ、それから結果の XRPose (en-US) の transform (en-US) プロパティにアクセスしています。これには 2 つの DOMPointReadOnly 属性があります。ベクトルを表す position と、クォータニオンを表す orientation です。

js

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));
  }
}

仕様書

Specification
Geometry Interfaces Module Level 1
# DOMPoint

ブラウザーの互換性

BCD tables only load in the browser

関連情報