W3cubDocs

/Web APIs

DOMPoint

A DOMPoint 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 on DOMPointReadOnly but allows its properties' values to be changed.

In general, a positive x component represents a position to the right of the origin, a positive y component is downward from the origin, and a positive z component extends outward from the screen (in other words, toward the user).

DOMPointReadOnly DOMPoint

Constructor

DOMPoint()

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

Instance properties

DOMPoint may also inherit properties from its parent, DOMPointReadOnly.

DOMPoint.x

The x coordinate of the DOMPoint.

DOMPoint.y

The y coordinate of the DOMPoint.

DOMPoint.z

The z coordinate of the DOMPoint.

DOMPoint.w

The perspective value of the DOMPoint.

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 mutable DOMPoint object given an existing point (or an object containing matching properties) which provides the values for its properties.

Examples

In the WebXR Device API, DOMPointReadOnly values are used to 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 using XRFrame.getViewerPose() during an XRSession animation frame, then accessing the resulting XRPose's transform property, which contains two DOMPointReadOnly attributes: position as a vector and orientation as a quaternion.

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

Specifications

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
DOMPoint 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
DOMPoint 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
fromPoint_static 61 79 62 No 48 10.1 61 61 62 45 10.3 8.0
w 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
worker_support 61 79 69 No 48 10.1 61 61 No 45 10.3 8.0
x 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
y 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0
z 61 79 31 No 48 10.1 61 61 31 45 10.3 8.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/DOMPoint