HTML | AbsoluteOrientationSensor Interface

Absolute Orientation Sensor:
The AbsoluteOrientationSensor is a fusion sensor that measures the rotation of a device in relation to the Earth’s coordinate system.

The rotation of devices on world coordinates is based on real accelerometer, gyroscope, and magnetometer sensors.

AbsoluteOrientationSensor Constructor:
To describe the device’s physical orientation in relation to the Earth’s reference coordinate system, the constructor creates a new AbsoluteOrientationSensor object

Syntax:

var absoluteOrientationSensor = new AbsoluteOrientationSensor([options])

Parameter:
Options are as follows:

• frequency:
  Number of times per second sensor.onreading is called is defined as its Frequency.
  A whole number or a decimal number may be used which is always less than the requested value.
• referenceFrame:
  Either ‘device’ or ‘screen’.
  The default is ‘device’.

Properties:
No specific properties; inherits methods from its ancestors OrientationSensor and Sensor.

Basic Example:
This simple demo illustrates how an absolute orientation sensor can be used to modify the rotation quaternion of a 3D model. The model is a three.js Object3D class instance that has quaternion property.
The generic sensor verifies whether it’s a relative or absolute orientation sensor and start the sensor accordingly.

function initSensor() {
              const options = { frequency: 60, coordinateSystem };
              console.log(JSON.stringify(options));
              sensor =
relative ? new RelativeOrientationSensor(options) :
                  new AbsoluteOrientationSensor(options);

              sensor.onreading =
() => model.quaternion.fromArray(sensor.quaternion).inverse();

              sensor.onerror = (event) => {
                if (event.error.name == 'NotReadableError') {
                 console.log("Sensor is not available.");
                }
              }
             sensor.start();
          }

Output:

Permissions Example:
Orientation sensors require requesting permissions for multiple device sensors for its usage. Promise.all is a good way to request permission for all the required Sensors.

const sensor = new AbsoluteOrientationSensor();
if (navigator.permissions) {
                 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")) {
                            initSensor();
                          } else {
         console.log("Permission to use sensor was denied.");
                     }
                 }).catch(err => {
           console.log("Integration with Permissions API
is not enabled, still try to start app.");
                                initSensor();
                           });
                } else {
                    console.log(
"No Permissions API, still try to start app.");
                    initSensor();
}

Output:

Browser Compatibility:

• AbsoluteOrientationSensor

  Chrome	69
  Edge	<=79
  Opera	56
  WebView Android	69
  Chrome Android	69
  Opera Android	48
  Samsung Internet Android	10.0

• AbsoluteOrientationSensor() Constructor
  

  Chrome	69
  Edge	<=79
  Opera	56
  WebView Android	69
  Chrome Android	69
  Opera Android	48
  Samsung Internet Android	10.0