OrientationSensor

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

この機能はサーバーで設定された Permissions Policy でブロックされる可能性があります。

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

ブラウザーの互換性

BCD tables only load in the browser