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

 Работа в Pano2VR | Ролловер-эффект в виртуальных турах и панорамах
 16.11.2016 |  18:00 |  3.2k |  4.5/51 |  22.09.2017
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Добавляем в VR-панораму ролловер-эффекты, Как в Pano2VR сделать смену картинки при нажатии на хотспот.

Второй вариант создания ролловер-эффекта в 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 пикселя.

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

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

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

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

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

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

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

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