Любой, у кого есть опыт работы с DeviceOrientationEvent и удобный телефон/планшет?DeviceOrientationEvent: как бороться с сумасшедшей гаммой, когда бета подходы/хиты 90deg?
Выполнение следующих фрагментов кода на устройстве с гироскопом. Я заметил, что гамма (вращающаяся влево/вправо вдоль оси Y) становится большой и непредсказуемой, поскольку бета приближается к 90 дэгу (устройство направляется вверх). Я предполагаю, что это gimbal-lock.
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
Мой вопрос: Как я могу предсказуемо трек влево/вправо ориентации устройства с помощью гамма? Гамма - единственное значение, о котором я забочусь - не требуется 3d-пространство.
Я рассмотрел использование матрицы вращения и кватерниона, как обсуждалось here, но не получивших действительных результатов. Фактически, примеры на странице github автора также ломаются, когда бета достигает 90deg! То же самое и с этим MDN tutorial - проверьте это на своем устройстве: когда он прямо вверх, мяч уходит в шок. Как эти аберрации остались незамеченными!
Помогает ли это [CodePen] (https://codepen.io/u01jmg3/pen/WRxJEX)? Он использует углы Кватерниона по углам Эйлера, чтобы избежать блокировки карданного вала. – u01jmg3
@ u01jmg3 благодарит за ваш ответ - этот код еще все еще сталкивается с проблемой блокировки - вы заметите, что если вы держите устройство прямо вверх и вниз, скручивание его не влияет. Напротив, если вы уложите свое устройство в плоское место, скручивание его влево/вправо приводит к желаемому результату. – calipoop