OrientationSensor

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Sensor APIsOrientationSensor インターフェイスは、向きセンサーのベースクラスです。このインターフェイスを直接使用することはできません。かわりに、このインターフェイスは継承するインターフェイスからアクセスされるプロパティとメソッドを提供します。

この機能はサーバーで設定された 権限ポリシー でブロックされる可能性があります。

EventTarget Sensor OrientationSensor

OrientationSensor をベースとするインターフェイス

以下は、OrientationSensor インターフェイスをベースとするインターフェイスの一覧です。

インスタンスプロパティ

OrientationSensor.quaternion

各要素がデバイスの向きを表す単位四元数の成分である 4 要素の Array を返します。

インスタンスメソッド

OrientationSensor.populateMatrix()

指定のオブジェクトに、センサーの最新の測定値に基づく回転行列を入れます。

基本的な例

以下の例は、だいたい Intel の Orientation Phone demo をもとにしており、1 秒に 60 回の周期を設定して AbsoluteOrientationSensor のインスタンスを生成しています。測定ごとに、OrientationSensor.quaternion を用いて電話の視覚的なモデルを回転しています。

js
const options = { frequency: 60, referenceFrame: "device" };
const sensor = new AbsoluteOrientationSensor(options);

sensor.addEventListener("reading", () => {
  // model は別の場所で生成した Three.js のオブジェクト
  model.quaternion.fromArray(sensor.quaternion).inverse();
});
sensor.addEventListener("error", (error) => {
  if (event.error.name === "NotReadableError") {
    console.log("センサーが利用できません。");
  }
});
sensor.start();

許可の例

向きセンサーを使用するには、複数のデバイスセンサーを使用する許可を要求する必要があります。Permissions インターフェイスは Promise を使用するので、許可を要求するのには Promise.all を使用するとよいです。

js
const sensor = new AbsoluteOrientationSensor();
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")) {
    sensor.start();
    // …
  } else {
    console.log("AbsoluteOrientationSensor を使用する許可がありません。");
  }
});

仕様書

Specification
Orientation Sensor
# orientationsensor-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
OrientationSensor
populateMatrix
quaternion

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support