Кубический панорамный элемент CSS с углами Эйлера в javascript

В настоящее время я работаю над созданием программы просмотра панорамных фотографий. У меня есть изображения, размещенные внутри куба CSS, и я работаю над тем, как управлять им, используя событие deviceorientation в javascript.

Я нашел и реализовал алгоритм для преобразования необработанных данных из события deviceorientation в углы Эйлера, но я не уверен, как подключить эти данные для поворота куба с помощью преобразований вращения CSS 3d.

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

Я думал об использовании three.js для этого, но размер библиотеки слишком велик для этого конкретного проекта. Мы хотим, чтобы накладные расходы были низкими.

Вот ручка кода, который у меня сейчас есть:

[УДАЛЕНО]

Любая помощь будет принята с благодарностью! Спасибо!

ОБНОВЛЕНИЕ

У меня есть некоторые основные функции, работающие сейчас. Вот обновленный код:

[УДАЛЕНО]

Вам нужно отключить поворот экрана, и вы должны наклонить телефон в альбомную ориентацию. Теперь моя новая проблема заключается в том, как заставить все это работать, когда телефон удерживается в портретном положении, а также когда включен поворот экрана.


javascript html css euler-angles panoramas
person Octothorpe    schedule 02.06.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Итак, мне наконец удалось решить эту проблему с помощью большого количества исследований и нескольких очень полезных статей в Google, особенно этой:

http://dev.opera.com/articles/w3c-device-orientation-usage/#demo

По сути, я преобразовал углы Тейта-Брайана из гироскопа в матрицу вращения. Это было немного сложно, так как существует много различных возможных последовательностей комбинаций осей при создании преобразования из матрицы Эйлера в матрицу вращения. Я использовал комбинацию ZYX, как в статье выше.

Затем я преобразовал эту исходную матрицу с помощью двух других матриц. Первым было вращение вокруг оси Z для учета ориентации экрана. Вторым была инверсия оси XZ, которая устранила проблему с направлением движения CSS-куба, когда камера смотрела вверх; глядя вверх переместил куб вниз.

Наконец, мне пришлось немного пошалить. Изображения внутри куба не соответствовали текущей ориентации, поэтому я реорганизовал изображения и повернул грани куба. Я пробовал различные преобразования вращательной матрицы, но, похоже, ничто не могло исправить это, не испортив мои элементы управления.

Надеюсь, это может быть полезно для кого-то еще, у кого есть аналогичная проблема.

Вы можете найти мой codepen окончательного решения здесь:

[УДАЛЕНО]

person Octothorpe    schedule 10.06.2014