Кликабельные объекты на панораме (Pano2VR)

 Работа в Pano2VR | Создание VR-панорам и виртуальных туров
 23.12.2016 |  10:30 |  4.5k |  4.8/23 |  16.11.2018
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Из этой статьи вы узнаете, как заставить объекты на панораме реагировать на нажатия кнопки мыши и выполнять при этом определенные действия.

Кликабельные объекты на панораме (Pano2VR)

Изображение

Кликабельностью я называю свойством объекта реагировать на нажатие кнопок мыши. В роли таких объектов могут выступать картины на стене, двери, окна, приборы воспроизведения аудио/видео и т.д. В рамках этой статьи будет рассматриваться алгоритм наделения объектов панорамы свойством кликабельности. В качестве примера взята панорама моей фотовыставки, на которой можно не только посмотреть фотографии на стене, но и увидеть сами фотографии, нажав на любую из них на стене.

Рисунок 1. Кнопка Patch "Input".

Для начала с помощью инструмента Patch Input (Коррекция текстуры) извлекаем фрагмент с нужным нам объектом. В моем случае это отдельная фотография, висящая на стене. Нужно извлечь корректировку таким образом, чтобы объект занимал всю площадь изображения корректировки. Формат изображения не важен, так как операция производится для того чтобы узнать размер извлеченной корректировки. При этом важно запомнить параметры Pan, Tilt и, при необходимости, Roll. Чтобы не приходилось запоминать или записывать, используйте переменную $с в имени файла.

Рисунок 2. Извлечение корректировки.

После извлечения всех корректировок откроем редактор оформления (Skin Editor) и создадим в нем шаблоны активных зон.

Рисунок 3. Создание шаблона активной зоны.

Для этого загрузим (с помощью перетаскивания) в область редактора изображение корректировки. Для удобства расчета установим позицию изображения в x=0; y=0. Затем добавим элемент "Точечная активная зона" и установим его по центру изображения. Зная размеры изображения, легко вычислить положение центра: x=ширина/2, y=высота/2.

Рисунок 4. Создание шаблона активной зоны.

После этого добавим элемент "Прямоугольник" и установим его размеры и позицию такими же, как у изображения. Изображение нам больше не понадобится, поэтому его удалим, а прямоугольник сделаем вложенным элементом для элемента активной зоны.

Рисунок 5. Создание шаблона активной зоны.

Прямоугольник не должен быть виден на панораме, поэтому сделаем его прозрачным, установив значение Alpha в 0.005. При значении Alpha равным 0 прямоугольник не будет реагировать на нажатия мыши. Самое оптимальное значение Alpha = 0.005.

Рисунок 6. Свойства прямоугольника.

Перейдем к настройке свойств элемента "Точечная активная зона". В группе свойств "Hotspot Template" активируем свойство 3D Distorsion (3D дисторсия) и задаем значение 3D Distance (3D дистанция), которое вычисляется по формуле 3Dдист=Ширина панорамы / 2 / Pi. В моем случае 3Dдист=8000 / 2 / 3,1415 = 1273,2.

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

Рисунок 7. Свойства и сценарии активной зоны.

Настало время разместить активные зоны на панораме. Для этого двойным нажатием кнопки мыши в нужном месте панорамы создаем активную зону, которую связываем с шаблоном с помощью идентификатора Skin-ID. Для каждого изображения прописан путь в свойстве URL. Именно этот путь будет устанавливаться для компонента отображения изображений (контейнер внешних файлов) в сценариях.

Рисунок 8. Расстановка активных зон.

Добавленные таким образом активные зоны будут иметь не точное положение на панораме. Поэтому их положение нужно скорректировать, используя запомненные ранее параметры Pan и Tilt.

Рисунок 9. Свойства активных зон.

Еще один важный момент при расстановке активных зон. В редакторе активных зон значение Pan находится в диапазоне от +180° до 0° и от 0° до −180°, а Pan при извлечении корректировки – в диапазоне от 0° до 360°. Поэтому, значение Pan для активных зон, которые находятся на правой половине области редактора, необходимо пересчитать. Значение Pan определяется по формуле −(360 − Panк), где Panк – значение Pan, которое использовалось при извлечении корректировки. В моем случае −(360 − 358.8) = −1.2.

Данный пример рассмотрен на версии программы 4.5.3. В версии 5 аналогичные инструменты, описанные в статье, будут другими. Сам алгоритм создания активных зон не изменится. На этом у меня всё. Если возникнут вопросы, задавайте их в комментариях.

Теги:  хотспот, Pano2VR, HTML5, кликабельность, редактор шаблона
Об авторе

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

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

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

Оцените материал
Поделитесь материалом в социальных сетях
Материалы по теме статьи

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

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

Нет комментариев
Сейчас просматривают
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 41
Онлайн всего: 5
Гостей: 5
Пользователей: 0