OrientationSensor

The OrientationSensor interface of the the Sensor APIs is the base class for orientation sensors. This interface cannot be used directly. Instead it provides properties and methods accessed by interfaces that inherit from it.

If a feature policy blocks use of a feature it is because your code is inconsistent with the policies set on your server. This is not something that would ever be shown to a user. See Feature-Policy for implementation instructions.

Interfaces based on OrientationSensor

Below is a list of interfaces based on the OrientationSensor interface.

Properties

OrientationSensor.quaternion
Returns a four element Array whose elements contain the components of the unit quaternion representing the device's orientation.

Methods

OrientationSensor.populateMatrix()
Populates the given object with the rotation matrix based on the latest sensor reading. The rotation maxtrix is shown below.

Examples

Basic Example

The following example, which is loosely based on Intel's Orientation Phone demo,  instantiates an AbsoluteOrientationSensor with a frequency of 60 times a second. On each reading it uses OrientationSensor.quaternion to rotate a visual model of a phone.

const options = { frequency: 60, referenceFrame: 'device' };
const sensor = new AbsoluteOrientationSensor(options);

sensor.addEventListener('reading', () => {
  // model is a Three.js object instantiated elsewhere.
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.AddEventListener('error', error => {
  if (event.error.name == 'NotReadableError') {
    console.log("Sensor is not available.");
  }
});
sensor.start();

Permissions Example

Using orientation sensors requires requsting permissions for multiple device sensors. Becuase the Permissions uses promises, a good way to request permissions is to use Promise.all.

const sensor = new AbsoluteOrientationSensor();
Promise.all([navigator.permissions.query({ name: "accelerometer" }),
             navigator.permissions.query({ name: "magnetometer" }),
             navigator.permissions.query({ name: "gyroscope" })])
       .then(results => {
         if (results.every(result => result.state === "granted")) {
           sensor.start();
           ...
         } else {
           console.log("No permissions to use AbsoluteOrientationSensor.");
         }
   });

Specifications

Specification Status Comment
Orientation Sensor
The definition of 'OrientationSensor' in that specification.
Candidate Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 69Edge ? Firefox ? IE ? Opera Full support 56Safari ? WebView Android Full support 69Chrome Android Full support 69Edge Mobile ? Firefox Android ? Opera Android Full support 56Safari iOS ? Samsung Internet Android ?
quaternionChrome Full support 69Edge ? Firefox ? IE ? Opera Full support 56Safari ? WebView Android Full support 69Chrome Android Full support 69Edge Mobile ? Firefox Android ? Opera Android Full support 56Safari iOS ? Samsung Internet Android ?
populateMatrixChrome Full support 69Edge ? Firefox ? IE ? Opera Full support 56Safari ? WebView Android Full support 69Chrome Android Full support 69Edge Mobile ? Firefox Android ? Opera Android Full support 56Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

Contributors to this page: jpmedley
Last updated by: jpmedley,