DeviceOrientationEvent: как бороться с безумной гаммой, когда бета приближается / достигает 90 градусов?

Кто-нибудь с опытом DeviceOrientationEvent и удобным телефоном / планшетом?

Запуская следующие фрагменты кода на устройстве, имеющем гироскоп, я замечаю, что гамма (вращение влево / вправо вдоль оси y) становится большой и непредсказуемой, когда бета приближается к 90 градусам (устройство направлено прямо вверх). Я предполагаю, что это замок на кардан.

var data, raf, alpha = document.getElementById("alpha"),
  beta = document.getElementById("beta"),
  gamma = document.getElementById("gamma");

window.addEventListener("deviceorientation", processData);
window.addEventListener('click', togglePause);
updateText();

function processData(e) {
  data = e;
}

function updateText() {
  if (data) {
    alpha.textContent = Math.round(data.alpha);
    beta.textContent = Math.round(data.beta);
    gamma.textContent = Math.round(data.gamma);
  }
  raf = requestAnimationFrame(updateText);
}

function togglePause(e) {
  if (raf) {
    cancelAnimationFrame(raf);
    raf = null;
    window.removeEventListener("deviceorientation", processData);
  } else {
    window.addEventListener("deviceorientation", processData);
    raf = requestAnimationFrame(updateText);
  }
}
body {
  font: normal 30px/200% sans-serif;
  margin: 20px;
  cursor: default;
}
span {
  font-size: 50px;
  vertical-align: middle;
}
<body>
  alpha: <span id="alpha">null</span>
  <br>beta: <span id="beta">null</span>
  <br>gamma: <span id="gamma">null</span>
  <br>[tap to pause/resume]
</body>

https://jsfiddle.net/1us8p1ad/show

Мой вопрос: как я могу предсказуемо отслеживать левую / правую ориентацию устройства с помощью гаммы? Гамма - единственная ценность, которая мне небезразлична - трехмерное пространство не требуется.

Я рассмотрел использование матрицы вращения и кватерниона, как обсуждалось здесь, но не получил достоверных результатов. На самом деле, примеры на странице автора github также ломаются, когда бета достигает 90 градусов! То же самое с этим уроком MDN - проверьте это на своем устройстве: когда оно выпрямлено, мяч сходит с ума. Как эти аберрации остались незамеченными!

Источник

2 ответа

Решение

Кажется, блокировка карданного подвеса является известным препятствием в реальной жизни, и многие приложения избегают его, ограничивая движение устройства (в моем случае это невозможно).

Мое решение состояло в том, чтобы преобразовать значения альфа / бета / гамма в матрицу вращения, а затем извлечь данные из одного из значений матрицы. Код, который я использовал, был дан здесь от W3C.

Обратите внимание, я пытался использовать кватернионы, но полученные значения не помогли двигаться только в 1 направлении.

Источник

Попробуйте Google 'Gimbal Lock' по причине,

и не просто сосредоточиться на самой гамме, часть ее значения угла переходит на альфа-ось, вам нужно пересчитать, принимая во внимание другие 2 измерения

см. аналогичный вопрос: /questions/45023960/ispravlenie-neregulyarnosti-sobyitiya-v-ios-safari-javascript/45023981#45023981

Источник
Другие вопросы по тегам