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
オブジェクトは、座標系における二次元または三次元の点を表します。最大三次元までの座標の値、およびオプションで視点の値も含まれます。 DOMPoint
は DOMPointReadOnly
に基づいていますが、そのプロパティの値を変更することができます。
一般的には、正の x
成分は原点よりも右側の位置を表し、正の y
成分は原点よりも下側の位置を表し、正の z
成分は画面の外側(言い換えれば、ユーザーの方向)に向かって広がっています。
コンストラクター
DOMPoint()
-
0 個以上の座標成分の値、およびオプションとして
w
の視点位置を与えられた新しいDOMPoint
オブジェクトを作成し、それを返します。また、既存のDOMPoint
やDOMPointReadOnly
、あるいはオブジェクトを使用して、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()
を呼び出すことで取得することができ、それから結果の XRPose
の transform
プロパティにアクセスしています。これには 2 つの DOMPointReadOnly
属性があります。ベクトルを表す position
と、クォータニオンを表す orientation
です。
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