Добавляем в виртуальный тур Pano2VR управление с помощью гироскопа

 Работа в Pano2VR | Создание VR-панорам и виртуальных туров
 05.05.2017    17:00    5.8k    13.06.2017
 Время на чтение: ...    Комментировать    Напечатать
Содержание статьи
 Пользователи Pano2VR

В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.

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

Добавляем в виртуальный тур Pano2VR управление с помощью гироскопа

Изображение

Управление с помощью гиродатчика позволяет управлять просмотром панорамы путем изменения положения мобильного устройства. При этом углы наклона и поворота панорамы будут соответствовать углам наклона и поворота устройства. Очевидно, что такое управление возможно только в мобильных устройствах, кроме того оснащенных этим датчиком.

Управление с помощью гироскопа возможно только проектах HTML5.

Включение управления с помощью гироскопа

Для включения возможности управления с помощью гироскопа следует в настройке HTML-шаблона активировать опцию «Include gyroscope control». В зависимости от версии программы, его местоположение различно. На рис. 1 показаны опции экспорта в HTML5 четвертой версии программы, а на рис. 2 и рис. 3 – опции экспорта пятой версии программы.

Рисунок 1. Настройки HTML шаблона в версии 4.3.5.

Чтобы управление гироскопом не включалось по умолчанию, следует активировать опцию «Disable on startup». При этом необходимо будет предусмотреть возможность включения с помощью кнопки. Как это сделать написано ниже.

Включение опции «Use true north» сообщает гироскопу о необходимости ориентирования панорамы на Север, подобно компасу. То есть, Если устройство обращено к Северу, то и панорама будет повернута в направлении на Север. Чтобы это работало корректно, необходимо задать направление на Север для панорамы.

Рисунок 2. Подключение HTML шаблона в версии 5 при экспорте в HTML5.

Чтобы отобразить все опции шаблона HTML в Pano2VR5 нажмите на кнопку . Должно появиться окно с опциями, как на рис. 3.

Рисунок 3. Настройки HTML шаблона в версии 5.2 beta 3.

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

Создание кнопки управления

Откроем редактор шаблона и создадим в нем элемент, который будет играть роль такой кнопки. Для таких целей хорошо подойдет Элемент «Кнопка» или Элемент «SVG». Зададим кнопке осмысленный идентификатор (Свойство ID), например «gyroscope» (Рис. 4).

Рисунок 4. Кнопка включения и выключения управления гироскопом.

Далее следует определить для кнопки обработчик события «Mouse Click» с какой-нибудь функцией, например, «Pan Left» (Рис. 5). Это я называю событием «пустышкой» К сожалению добавление сценариев управления гироскопом в настоящий момент пока не предусмотрено. Надеюсь, в новых версиях появится такая возможность. А пока её нет, приходится добавлять «пустышку», а потом после экспорта вносить изменения в файл skin.js, о чем будет сказано далее.

Рисунок 5. Событие «пустышка».

Если у вас версия 5, то можно предусмотреть скрытие, созданной ранее кнопки управления в случае, если просмотр панорамы осуществляется с браузера ПК. Для этого свойство «Visible» по-умолчанию нужно установить в отключенное состояние (false) и создать логический блок, с триггером «Is Mobile» (Рис. 6).

Рисунок 6. Логический блок, позволяющий отображать кнопку только при просмотре с мобильных устройств.

После всех этих действий следует сохранить обновленный файл оформления (скина) и произвести Экспорт в HTML5.

Затем следует открыть в текстовом редакторе (Рекомендую Notepad++) файл skin.js и найти определение кнопки по её ID, который был задан ранее. Интерес будет представлять тело функции

this._qyroscope.onclick = function (){}
Рисунок 7. Поиск события «пустышки» в файле skin.js.

Так, как в качестве «пустышки» использовался сценарий Pan Left, в теле функции прописано me.player.changePanLog();. Эту строку следует заменить строкой gyro.toggle();. Это значит, что при каждом последующем нажатии на кнопку состояние управления гироскопа будет изменяться на противоположное. Из включенного в выключенное, и наоборот.

Рисунок 8. Файл skin.js после правки.

Для управления можно предусмотреть две кнопки: одна на включение, другая на выключение. В onclick первой следует прописать

gyro.enable();

А в onclick второй –

gyro.disable();

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

Теперь файл skin.js можно сохранить и открыть просмотр панорамы. Если же в вашем устройстве нет гироскопа, Его можно сэмулировать в режиме разработчика браузера в Opera или Chrome (Рис. 9, Рис. 10)

Рисунок 9. Активация вкладки «Sensors» в режиме разработчика.
Рисунок 10. Эмуляция датчика гироскопа.

На сайте имеется один виртуальный тур, в котором есть управление с помощью гироскопа.

Как вам материал?

0 реакции
👍
0
👎
0
😂
0
😱
0
😡
0
😢
0
Поделитесь материалом в социальных сетях

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

Если этот материал совсем не то, куда Вас привел поисковик, попробуйте выполнить поиск по сайту или введите запрос в строку ниже. Также Вы можете посмотреть другие материалы в разделе статьи.

ТЕГИ МАТЕРИАЛА:
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Материалы по теме статьи
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Нет комментариев

Ранний доступ к материалам, эксклюзивный контент и другие бонусы от меня по подписке от 200 ₽ в месяц.

VK Donut
 
Платные темы OK
 
Boosty
 
Patreon
 
Сейчас просматривают
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 49
Последние новости
Фотомарафон «Октябрь в объективе»

Объявляю о начале осеннего фотомарафона «Октябрь в объективе». Данный проект направлен на объединени...

 События
 07.10.2025    18:30    96    0
Мой сайт теперь можно установить, как приложение

Я постоянно работаю над тем, чтобы вам было удобнее и приятнее пользоваться моим сайтом sergeydishuk...

 Обновления сайта
 21.09.2025    08:10    107    0
Охота на лунное затмение провалилась и почему я все равно не жалею

Вчера, 7 сентября, должно было случиться лунное затмение. Я, как и многие фотографы, готовился его с...

 События
 08.09.2025    19:20    158    0
Последние статьи
Как я сделал виртуальный тур для музея академика П.Ф. Ракицкого

Иногда самые интересные проекты приходят неожиданно. Так случилось и с этим виртуальным туром: предл...

 О создании панорам
 04.10.2025    08:35    170    0
10 советов для начинающих фотографов

Фотография – это не только техника, но и умение видеть мир иначе. Для новичка путь к сильным кадрам ...

 Статьи по фотографии
 28.09.2025    12:32    100    0
30 вопросов и комментариев, которые бесят фотографа

В этой статье я привел десятки реальных примеров тех самых «болевых» вопросов, которые фотографы слы...

 Статьи по фотографии
 24.09.2025    10:32    106    0
Онлайн всего: 2
Гостей: 2
Пользователей: 0