Делаю небольшую програмку в которой телефон должен подключиться по вебсокету к сайту, на котором появляется моделька телефона (пока что весьма схематичная). Смысл в том чтобы моделька крутилась в 3д повторяя положение телефона в пространстве, но с этими осями постоянно какая-то жесть происходит.
Вот так я подписываюсь на событие изменения ориентации:
var listener = function (event) {
that.orientation.alpha = event.alpha;
that.orientation.beta = event.beta + 180;
that.orientation.gamma = event.gamma + 90;
};
...
window.addEventListener('deviceorientation', listener, false);
Идея была в следующем: мы открываем сайт, там нарисована моделька. Мы берем телефон и размещаем его в пространстве так же как и модельку (вертикально) и тапаем по экрану телефона (это нужно чтобы синхранизировать оси телефона и модельки). Вообщем-то все работает, но только пока мы не переворачиваем телефон. Дальше начинает твориться какой-то ад, я пока не понял как работают эти оси а информации очень мало. Если кто-то работал с этим и представляет как сделать подобное - буду очень рад услышать. Кому интересно - могу дать демку (только если будет смотреть больше 1 человека могут быть проблемы т.к. сервер и демка пока это не обрабатывают)
При подписке делаю так чтобы не было отрицательных значений (так как изначально бета от - 180 до 180, а гамма от - 90 до 90)
Далее, я решил, чтобы при вращении модельки и телефона и преодолении рубежа в 360 градусов моделька не делала обратный круг я стал передавать на сайт не точное значение градусов, а изменения градусов к предыдущей отправке.
Тут встало 2 проблемы:
1) Как быть с постепенно растущей погрешностью в положениях телефона и модельки? (я подумываю над вариантом раз в 2-3 секунды посылать точные значения)
2) Воизбежания скачка модельки при преодолении максимальных рубежей для осей расчет идет примерно так:
private getDelta():IOrientation {
return {
alpha: Message.calculateValue(this.orientation.alpha, this.oldOrientation.alpha, 360),
beta: Message.calculateValue(this.orientation.beta, this.oldOrientation.beta, 360),
gamma: Message.calculateValue(-this.orientation.gamma, -this.oldOrientation.gamma, 180)
}
}
private static calculateValue(newValue, oldValue, maxValue) {
var delta = newValue - oldValue;
return Math.min(maxValue - Math.abs(delta), Math.abs(delta)) * ((delta < 0) ? 1 : -1);
}
Пишу на TypeScript если кому режет глаз - выложу js
