Repository navigation
Expand file tree
/
Copy pathindex.md
More file actions
83 lines (58 loc) · 2.86 KB
/
Copy pathindex.md
File metadata and controls
83 lines (58 loc) · 2.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
---
title: RelativeOrientationSensor
slug: Web/API/RelativeOrientationSensor
page-type: web-api-interface
browser-compat: api.RelativeOrientationSensor
---
{{securecontext_header}}{{APIRef("Sensor API")}}
The **`RelativeOrientationSensor`** interface of the [Sensor APIs](/en-US/docs/Web/API/Sensor_APIs) describes the device's physical orientation without regard to the Earth's reference coordinate system.
To use this sensor, the user must grant permission to the `'accelerometer'`, and `'gyroscope'` device sensors through the [Permissions API](/en-US/docs/Web/API/Permissions_API). In addition, this feature may be blocked by a [Permissions Policy](/en-US/docs/Web/HTTP/Guides/Permissions_Policy) set on your server.
{{InheritanceDiagram}}
## Constructor
- {{domxref("RelativeOrientationSensor.RelativeOrientationSensor", "RelativeOrientationSensor()")}}
- : Creates a new `RelativeOrientationSensor` object.
## Instance properties
_No specific properties; inherits properties from its ancestors {{domxref('OrientationSensor')}} and {{domxref('Sensor')}}._
## Instance methods
_No specific methods; inherits methods from its ancestors {{domxref('OrientationSensor')}} and {{domxref('Sensor')}}._
## Events
_No specific events; inherits events from its ancestor, {{domxref('Sensor')}}._
## Examples
### Basic Example
The following example, which is loosely based on [Intel's Orientation Phone demo](https://intel.github.io/generic-sensor-demos/orientation-phone/), instantiates a `RelativeOrientationSensor` with a frequency of 60 times a second.
> [!NOTE]
> The Intel demo this is based on uses the `AbsoluteOrientationSensor`. On each reading it uses {{domxref('OrientationSensor.quaternion')}} to rotate a visual model of a phone.
```js
const options = { frequency: 60, referenceFrame: "device" };
const sensor = new RelativeOrientationSensor(options);
sensor.addEventListener("reading", () => {
// model is a Three.js object instantiated elsewhere.
model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener("error", (error) => {
if (event.error.name === "NotReadableError") {
console.log("Sensor is not available.");
}
});
sensor.start();
```
### Permissions Example
Using orientation sensors requires requesting permissions for multiple device sensors. Because the {{domxref('Permissions')}} interface uses promises, a good way to request permissions is to use {{jsxref('Promise.all')}}.
```js
const sensor = new RelativeOrientationSensor();
Promise.all([
navigator.permissions.query({ name: "accelerometer" }),
navigator.permissions.query({ name: "gyroscope" }),
]).then((results) => {
if (results.every((result) => result.state === "granted")) {
sensor.start();
// …
} else {
console.log("No permissions to use RelativeOrientationSensor.");
}
});
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}