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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
DOMPoint
DOMPoint() constructor
fromPoint() static method
w
Available in workers
x
y
z

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報