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.

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


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


2


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.