Skip to content
Related Articles

Related Articles

Improve Article

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.




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
    Chrome69
    Edge<=79
    Opera56
    WebView Android69
    Chrome Android69
    Opera Android48
    Samsung Internet Android10.0
  • AbsoluteOrientationSensor() Constructor
    Chrome69
    Edge<=79
    Opera56
    WebView Android69
    Chrome Android69
    Opera Android48
    Samsung Internet Android10.0

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :