Skip to content
Related Articles

Related Articles

HTML | AbsoluteOrientationSensor Interface
  • Last Updated : 18 Jun, 2020

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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();
          }

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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();
}

chevron_right


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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :