Второй вариант создания ролловер-эффекта в Pano2VR

Добавляем в VR-панораму ролловер-эффекты, Как в Pano2VR сделать смену картинки при нажатии на хотспот.

1 5 4.5 51

Второй вариант создания ролловер-эффекта в Pano2VR

Изображение
Рисунок 1.

Ранее в статье был рассмотрен способ создания ролловер-эффекта. Его суть заключалась в том чтобы изменять состояние двери с закрытого на открытую при наведении курсора. В этой статье рассматривается этот же эффект только сделан он немного по-другому. Состояние объекта будет изменяться по нажатию на активную зону (хотспот). Стоит отметить, что экспортировать созданный проект нужно будет в формат HTML5.

Создадим проект и выберем панораму с объектами (в моем случае входная дверь), для которых будет создан ролловер-эффект, находятся в закрытом состоянии (Рис. 1).

Из другой панорамы, с объектами в открытом состоянии с помощью инструмента Корректор извлечем корректировку в формате PNG или JPEG. Запомните значения параметров Pan, Tilt и FoV, с которыми извлекалась корректировка.

Рисунок 2.

Откроем редактор медиа (Рис. 3) и добавим изображение корректировки.

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

Рисунок 3.

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

Рисунок 4.

В шаблоне оформления создадим точечную активную зону (Рис. 5), с которой будут связаны изображения кнопок, отражающих состояние двери, которое будет установлено после нажатия на кнопку. Присвоим ей идентификатор "hs_door".

Рисунок 5.

Для смены видимости создадим 2 метода Mouse Click (Рис. 6), в которых вызывается действие Toggle Element Visibility для обоих изображений. При нажатии на хотспот видимый элемент будет становиться не видимым, а не видимый – видимым. Чтобы переключение работало корректно, отключим свойство Visible для элемента "state_closed".

Рисунок 6.

Сохраним шаблон и откроем редактор активных зон. Нажмем дважды левой кнопкой мыши в области панорамы и переместим созданную активную зону в место, где должна быть созданная в оформлении кнопка переключения. В поле Skin-ID введем идентификатор шаблона активной зоны в оформлении – "hs_door" (Рис. 7).

Рисунок 7.

Перейдем к экспорту в HTML5. Настройки экспорта можете установить на свое усмотрение. Главное подключить HTML-файл, с которым будем работать на следующем этапе.

После завершения экспорта откроем в текстовом редакторе HTML-файл и внесем несколько изменений:

1. В секции <style> добавим два CSS-селектора с классами ".elemhidden" и ".elemvisible".

 .elemhidden { opacity: 0 }
 .elemvisible { opacity: 1 } 

2. Javascript

<script>
 document.addEventListener('DOMContentLoaded', function() {
 var elmedia = document.getElementsByClassName('ggmedia');
 for (var i=0; i<elmedia.length; i++){
 if (elmedia[i].tagName.toLowerCase() == 'img') {
 elmedia[i].setAttribute('id','media' + i);
 elmedia[i].style.setProperty('transition', 'opacity 500ms linear');
 elmedia[i].classList.add('elemhidden');
 }
 }
 });
</script>

Этот скрипт находит все элементы с классом "ggmedia" и, если, этот элемент изображение (тег <img>), добавляет к нему класс "elemhidden" и свойство CSS transition для плавности перехода.

В результате должно получится следующее:

Рисунок 8.

Сохраним файл, и затем откроем в текстовом редакторе файл skin.js. В начало добавим функцию, которая будет переключать состояние видимости изображений.

function toggleImage(id){
 elm=document.getElementById(id);
 if (elm.classList.contains('elemhidden')) {
 elm.classList.remove('elemhidden');
 elm.classList.add('elemvisible');
 } else 
 {
 elm.classList.remove('elemvisible');
 elm.classList.add('elemhidden'); 
 }
}
Рисунок 9.

Находим объявление функции SkinHotspotClass.

Рисунок 10.

Несколько строк ниже находится описание элемента "hs_door".

Рисунок 10.

Чуть ниже будет объявление события onclick. Сразу после открывающейся фигурной скобки напишем вызов функции toggleImage(), передав в качестве параметра "media0".

Рисунок 11.

Все готово. Можно открывать просмотр панорамы.

Рисунок 12.

Если нужно создать ролловер-эффект для нескольких объектов (например, для всех дверей в комнате), то необходимо для каждого объекта создавать свой шаблон активной зоны. Возможно, понадобится доработка скрипта, чтобы при его выполнении не затрагивались внедренные изображения, которые не добавлялись для создания ролловер-эффекта. Стоит отметить, что иногда наложение изображения происходит не всегда идеально, появляется различие в 1-2 пикселя.

Ролловер-эффект в виртуальных турах и панорамах | Добавил: СЕРГЕЙ ДИШУК (16.11.2016)
749 | Теги: эффект, ролловер, HTML5, Pano2VR, Javascript, ЭКСПОРТ
Рейтинг: 4.5 / 51 | Оцените материал:

Поделиться в социальных сетях:

Об авторе статьи:

Сергей Дишук, фотограф-любитель. Снимает пейзажи, животных, репортажи различных городских мероприятий. Увлекается программированием и разработкой программного обеспечения. Занимается съемкой панорам и созданием виртуальных туров более 5-ти лет. Имеет опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR, Autopano, Panotour.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

Комментарии:

Загляните в мои соцсети

Если желаете получать информацию о новых материалах сайта (статьи, новости, панорамы и туры) или следить за моим творчеством (фотография в целом), подпишитесь на мои сообщества в социальных сетях.

Фотографии и панорамные изображения публикую на этих ресурсах:

Профиль на 360cities.net

Профиль на 1panorama.ru

Профиль на fotokto.ru

Профиль на photocentra.ru

Профиль на photosight.ru

Активные участники группы ВК
Недавние панорамы
Рубрикатор
Случайная панорама
Опрос
Как помогают Вам мои материалы по работе с Pano2VR?
Всего ответов: 7