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
Contact Us