Ролловер-эффект в Pano2VR

 Работа в Pano2VR | Ролловер-эффект в виртуальных турах и панорамах
 16.12.2015 |  12:05 |  5.3k |  4.1/672 |  17.04.2019
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Добавляем в VR-панораму ролловер-эффекты, Как в Pano2VR сделать смену картинки при наведении курсора.

Ролловер-эффект в Pano2VR

Изображение

Что такое ролловер-эффект.

Ролловер-эффектом называют изменение состояния (формы, положения) объекта при наведении на него курсора. В этой статье мы научимся создавать такой эффект в Pano2VR на простом примере с дверью. При наведении курсора на дверь, она будет принимать открытое состояние, а в случае покидания курсора – закрытое. Для этого нам понадобятся 2 сферические панорамы, снятые с одной точки и имеющие отличия в одной и той же области изображения. Примеры панорам показаны на рис.1 и рис. 2. Я сделал одну панораму с закрытой дверью, которая будет использоваться как основная, вторую сделал с открытой дверью. От второй панорамы будет использован небольшой участок.

Рисунок 1. Вариант панорамы с закрытой входной дверью.

Рисунок 2. Вариант панорамы с открытой входной дверью.

Приступая к работе.

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

Рисунок 3. Извлечение участка изображения.

Угол обзора (FoV) делаем минимально возможным (рис. 4) чтобы не брать лишние детали и не получить в результате файл большого размера. При необходимости изменяем параметры Pan и Tilt.

Рисунок 4. Установка параметров вида для извлечения участка изображения.

После извлечения корректировки загружаем первый вариант панорамы и установив те же параметры извлекаем корректировку. В результате имеем 2 файла изображения, с которыми будем работать дальше.

Рисунок 5. Совмещение извлеченных корректировок.

Обе корректировки могут неидеально совпадать. Где-то могут быть не нужные блики. В данном случае отражения в окнах на обоих изображениях немного различаются, а также присутствует отличие по тону. При последовательной смене изображений это заметно (рис. 5). Для устранения этого артефакта выполним следующие действия.

Откроем графический редактор, например Adobe Photoshop и загрузим в него как слои оба файла корректировок. Расположим вторую корректировку выше первой.

Рисунок 6. Корректировки, загруженные в Adobe Photoshop.

К верхнему слою добавим маску и черной кистью с минимальной жесткостью зарисуем все, кроме открытой двери. Чтобы лучше видеть закрашиваемую область, нижний слой можно отключить (рис. 7).

Рисунок 7. Добавление маски к слою.

Включим все слои и выполним сведение пункт меню Слои -> Выполнить сведение. Сохраняем полученный результат. Это изображение будем использовать в дальнейшем.

Создаем новый проект и загружаем в него первый вариант панорамы. Затем экспортируем в формат Flash или HTML5 (рис. 8).

Рисунок 8. Экспорт в HTML5.

В появившемся окне в секции «Шаблон контроллера и оформления» выбираем файл оформления (.ggsk) и нажимаем на кнопку Редактировать.

Перетаскиванием добавим изображение, которое было получено в Photoshop. Для удобства отсчета координат установим позицию в x:0, y:0. Дадим компоненту имя «door_opened».

Рисунок 9. Загрузка изображения в редактор оформления.

На панели инструментов активируем кнопку и на холсте создаем новую метку активной зоны. Дадим компоненту имя «hs_door». Позицию установим в центр изображения. Так как размеры изображения 695x695 пикселей, то центр находится в позиции x:348, y:348 (рис. 10). Включим свойство Cursor-Hand, чтобы при наведении курсор принимал вид руки-указателя.

Рисунок 10. Свойства позиции хотспота.

В группе «Хотспот шаблон» (рис. 11) включаем свойство 3D дисторсия и задаем значение свойству 3D дистанция, которое вычисляется по формуле: 3Dдист=Ширина панорамы / 2 / Pi. 3Dдист=6000 / 2 / 3,1415 = 954,9.

Рисунок 11. Группа «Хотспот шаблон».

Сделаем компонент «door_opened» вложенным в элемент «hs_door» (рис. 12)

Рисунок 12. Компоненты оформления.

Нужно сделать так, чтобы изображение, скрытое изначально, показывалось при наведении курсора на активную зону. Для плавности показа будем использовать свойство «Прозрачность» вместо свойства «Отображение». Установим прозрачность компонента «door_opened» в 0 (рис. 13).

Рисунок 13. Группа «Внешний вид». Свойства компонента «door_opened».

Так как компонент «door_opened» полностью прозрачен, он не может реагировать на наведение курсором. Поэтому добавим прямоугольник поверх изображения. Размеры прямоугольника подбираем таким образом, чтобы он вписывался в габариты закрытой двери (рис .14). Компоненту дадим имя «rectangle».

Рисунок 14. Контекстное меню панорамы с добавленными пунктами.

При наведении курсора на прямоугольник будет показано изображение. Прямоугольник тоже необходимо сделать прозрачным, но таким образом, чтобы у него была возможность реагировать на наведение курсора. Установим значение свойства «Прозрачность» в 0,005 (рис. 15).

Рисунок 15. Группа «Внешний вид». Свойства компонента «rectangle».

Далее нужно определить сценарии поведения прямоугольника на наведение курсора (рис. 16). При наведении курсора на прямоугольник «rectangle»(Mouse Enter), компонент «door_opened» будет становиться полностью непрозрачен. При покидании курсора, компонент «door_opened» станет полностью прозрачен.

Рисунок 16. Сценарии для компонента «rectangle».

После всех этих действий сохраняем файл изменения, выходим из редктора оформления и закрываем окно экспорта без согласия на осуществление экспорта файлов. В редакторе активных зон создадим точечную активную зону. В поле ввода ID шаблона вводим имя хотспота, которое было определено в оформлении, т.е. «hs_door» (рис. 17).

Рисунок 17. Редактор активных зон.

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

Рисунок 18. Вкладка «Листинг хотспотов».

Теперь можно экспортировать и запускать просмотр.

Теги:  HTML5, flash, Pano2VR, экспорт, Ролловер, эффект
Об авторе

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

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

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

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

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

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

Нет комментариев
Сейчас просматривают
Связь со мной и соцсети
Telegram
Viber
LinkedIn
ВКонтакте
 
Одноклассники
 
Instagram
 
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 40
Онлайн всего: 4
Гостей: 4
Пользователей: 0