DOMPoint

BaselineWidely available

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

Note: This feature is available inWeb Workers.

ADOMPoint object represents a 2D or 3D point in a coordinate system; it includes values for the coordinates in up to three dimensions, as well as an optional perspective value.DOMPoint is based onDOMPointReadOnly but allows its properties' values to be changed.

In general, a positivex component represents a position to the right of the origin, a positivey component is downward from the origin, and a positivez component extends outward from the screen (in other words, toward the user).

Constructor

DOMPoint(): Creates and returns a newDOMPoint object given the values of zero or more of its coordinate components and optionally thew perspective value. You can also use an existingDOMPoint orDOMPointReadOnly or an object to create a new point by calling theDOMPoint.fromPoint() static method.

Instance properties

DOMPoint may also inherit properties from its parent,DOMPointReadOnly.

DOMPoint.x: Thex coordinate of theDOMPoint.
DOMPoint.y: They coordinate of theDOMPoint.
DOMPoint.z: Thez coordinate of theDOMPoint.
DOMPoint.w: The perspective value of theDOMPoint.

Instance methods

DOMPoint inherits instance methods from its parent,DOMPointReadOnly.

Static methods

DOMPoint may also inherit static methods from its parent,DOMPointReadOnly.

DOMPoint.fromPoint(): Creates a new mutableDOMPoint object given an existing point (or an object containing matching properties), which provides the values for its properties.

Examples

In theWebXR Device API,DOMPointReadOnly values represent positions and orientations. In the following snippet, the pose of the XR device (such as a VR headset or phone with AR capabilities) can be retrieved by calling usingXRFrame.getViewerPose() during anXRSession animation frame, then accessing the resultingXRPose'stransform property, which contains twoDOMPointReadOnly attributes:position as a vector andorientation as a quaternion.

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