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).
Constructor
DOMPoint()
- Creates and returns a new
DOMPoint
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 aDOMPointInit
dictionary to create a new point by calling theDOMPoint.fromPoint()
static method.
Methods
DOMPoint
inherits methods from its parent, DOMPointReadOnly
.
Static methods
Creates a new mutable DOMPoint
object given an existing point (or a DOMPointInit
dictionary) which provides the values for its properties.
Properties
DOMPoint
inherits properties from its parent, DOMPointReadOnly
.
DOMPoint.x
- The
x
coordinate of theDOMPoint
. DOMPoint.y
- The
y
coordinate of theDOMPoint
. DOMPoint.z
- The
z
coordinate of theDOMPoint
. DOMPoint.w
- The perspective value of the
DOMPoint
.
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.
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
Specification | Status | Comment |
---|---|---|
Geometry Interfaces Module Level 1The definition of 'DOMPoint' in that specification. | Candidate Recommendation |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Chrome
Full support 61 |
Edge
Full support 79 |
Firefox
Full support 31 |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 10.1 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
Full support 31 |
Opera Android
Full support 45 |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 8.0 |
Chrome
Full support 61 |
Edge
Full support 79 |
Firefox
Full support 31 |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 10.1 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
Full support 31 |
Opera Android
Full support 45 |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 8.0 | |
Available in workers | Chrome
Full support 61 |
Edge
Full support 79 |
Firefox
Full support 69 |
IE
No support No |
Opera
Full support 48 |
Safari
Full support 10.1 |
WebView Android
Full support 61 |
Chrome Android
Full support 61 |
Firefox Android
No support No |
Opera Android
Full support 45 |
Safari iOS
Full support 10.3 |
Samsung Internet Android
Full support 8.0 |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.'
- Experimental. Expect behavior to change in the future.
See also
DOMPoint by Mozilla Contributors is licensed under CC-BY-SA 2.5.