Что такое гироскоп?

Гироскоп — это крошечный датчик в вашем телефоне, планшете или ноутбуке, который измеряет вращение по трём осям. В сочетании с акселерометром и магнитометром он сообщает устройству, в какую сторону оно наклонено, с какой скоростью оно вращается и в каком направлении оно ориентировано. Эти данные обеспечивают автоматический поворот экрана, дополненную реальность, гоночные игры, панорамные фотографии, подсчёт шагов и стабилизацию изображения.

Современные устройства предоставляют эту информацию веб-браузерам через API DeviceOrientationEvent. Браузер сообщает три угла — alpha, beta и gamma — которые вместе описывают ориентацию устройства в трёхмерном пространстве относительно Земли.

Понимание alpha, beta и gamma

Три угла ориентации каждый описывают вращение вокруг разной оси:

  • Alpha (0–360°) — Вращение вокруг оси Z (вертикальная). Представьте, что вы вращаете устройство, лежащее на столе; alpha — это направление, как на компасе.
  • Beta (-180–180°) — Вращение вокруг оси X (слева направо). Это наклон спереди назад, как если бы вы кивали устройством в вашу сторону или от вас.
  • Gamma (-90–90°) — Вращение вокруг оси Y (сверху вниз). Это наклон слева направо, как если бы вы наклоняли устройство в сторону.

Описание инструмента

Этот инструмент читает данные живой ориентации с гироскопа вашего устройства и отображает их как трёхмерную модель, которая зеркально отражает ваши движения в реальном времени. Он также показывает необработанные значения alpha, beta и gamma в градусах, чтобы вы могли проверить, что датчик работает правильно и выдаёт точные показания.

Примеры

Положение устройства Alpha Beta Gamma
Лежит плоско, экран вверх, верх на С 0° 0° 0°
Держится вертикально в портретном режиме 0° 90° 0°
Наклонено правым краем вниз (ландшафт) 0° 0° 90°
Повёрнуто на 180° плоско, экран всё ещё вверх 180° 0° 0°

Возможности

  • Живая трёхмерная модель, которая вращается синхронно с вашим устройством
  • Показания alpha, beta и gamma в реальном времени в градусах
  • Определяет, поддерживает ли браузер API ориентации

Как это работает

Инструмент подписывается на событие deviceorientation браузера, которое срабатывает всякий раз, когда ориентация вашего устройства изменяется. Каждое событие предоставляет текущие значения alpha, beta и gamma. Трёхмерная модель использует Three.js для преобразования этих углов в кватернион вращения, применяемый с плавной интерполяцией на каждом кадре анимации, чтобы избежать дрожания.

Ограничения

  • Требует устройство со встроенным гироскопом (большинство настольных компьютеров и многие ноутбуки его не имеют)
  • iOS Safari требует явного разрешения через жест пользователя перед тем, как данные датчика будут переданы
  • Требует защищённый контекст (HTTPS) на большинстве современных браузеров
  • Некоторые браузеры сообщают ориентацию только когда страница находится на переднем плане

Советы

  • Если показания остаются на нуле, ваше устройство, вероятно, не имеет гироскопа или браузер блокирует доступ
  • На iOS нажмите кнопку «Включить движение» после загрузки страницы — разрешение не может быть предоставлено автоматически
  • Положите устройство плоско на стабильную поверхность, чтобы подтвердить базовые значения перед тестированием наклонов