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.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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

ブラウザーの互換性

関連情報