docs.rodeo

MDN Web Docs mirror

XRReferenceSpace

{{APIRef("WebXR Device API")}} {{secureContext_header}} 

The WebXR Device API’s XRReferenceSpace interface describes the coordinate system for a specific tracked entity or object within the virtual world using a specified tracking behavior. The tracking behavior is defined by the selected reference space type. It expands upon the base class, {{domxref("XRSpace")}} , by adding support for several different tracking behaviors as well as to request a new reference space which describes the offset transform between the tracked object and another location in the world.

All reference spaces—with the sole exception being bounded reference spaces—are described using the XRReferenceSpace type. Bounded spaces are implemented as {{domxref("XRBoundedReferenceSpace")}}  objects. These are special spaces which let you establish a perimeter within which it’s “safe” for the viewer to move. For XR systems that allow the user to physically move around, such as those that track movement with a real-world camera, this boundary establishes the edges of the area the user is able to move around in, whether due to physical obstacles or due to limitations of the XR hardware. See the article Using bounded reference spaces to protect the viewer for more on using boundaries to keep the user from colliding with obstacles both physical and virtual.

{{InheritanceDiagram}} 

Instance properties

XRReferenceSpace inherits the properties of {{domxref("EventTarget")}}  but defines no additional properties.

Instance methods

XRReferenceSpace also inherits methods from {{domxref("EventTarget")}}  in addition to the following methods.

Events

Reference space types

The types of reference space are listed in the table below, with brief information about their use cases and which interface is used to implement them.

Usage notes

Creating an XRReferenceSpace

There are two situations in which you need to obtain an XRReferenceSpace. The first is when you set up your scene and need to obtain a reference space to represent the user’s viewpoint on the world for the duration of the {{domxref("XRSession")}} . To do that, call the {{domxref("XRSession")}}  method {{domxref("XRSession.requestReferenceSpace", "requestReferenceSpace()")}} , specifying the reference space type you wish to obtain.

xrSession.requestReferenceSpace("local").then((refSpace) => {
  xrReferenceSpace = refSpace;
  // …
});

The other situation in which you may need to acquire a new reference space is if you need to move the origin to a new position; this is commonly done, for example, when your project allows the user to move through the environment using input devices such as the keyboard, mouse, touchpad, or game controls that are not connected through the XR device. Since the origin will typically be the user’s location in the space, you need to change the origin to reflect their movement and any orientation changes they make.

To move or rotate the user’s view of the world, you need to change the XRReferenceSpace used to represent that viewpoint. However, XRReferenceSpace is immutable, so you need to instead create a new reference space representing the changed viewpoint. This is easily done using the {{domxref("XRReferenceSpace.getOffsetReferenceSpace", "getOffsetReferenceSpace()")}}  method.

let offsetTransform = new XRRigidTransform(
  { x: 2, y: 0, z: 1 },
  { x: 0, y: 0, z: 0, w: 1 },
);
xrReferenceSpace = xrReferenceSpace.getOffsetReferenceSpace(offsetTransform);

This replaces the XRReferenceSpace with a new one whose origin and orientation are adjusted to place the new origin at (2, 0, 1) relative to the current origin and rotated given a unit {{Glossary("quaternion")}}  that orients the space to put the viewer facing straight up relative to the previous world orientation.

Geometry

The native origin of any XRReferenceSpace is always configured so that +X is considered to be to the right, +Y is upward, and +Z is “backward” or toward the user.

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN