DOMPoint

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

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

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

DOMPointReadOnly DOMPoint

コンストラクター

DOMPoint()

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

インスタンスプロパティ

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

DOMPoint.x

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

DOMPoint.y

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

DOMPoint.z

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

DOMPoint.w

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

インスタンスメソッド

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

静的メソッド

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

DOMPoint.fromPoint()

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

WebXR 機器 API では、位置や向きを表すために DOMPointReadOnly 値が使用されます。以下のスニペットでは、 XR 機器(VR ヘッドセットや AR 機能付き携帯電話など)のポーズは XRSession アニメーションフレームの中で XRFrame.getViewerPose() を呼び出すことで取得することができ、それから結果の XRPosetransform プロパティにアクセスしています。これには 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

関連情報