Запуск виртуального тура со случайной или определенной панорамы (Pano2VR)

Запустить виртуальный тур со случайной или определенной панорамы. Как динамически изменить стартовую панораму Pano2VR / HTML5 по по определенному условию.

1 5 4.3 322

Виртуальный тур с запуском со случайной панорамы (Pano2VR)

Изображение

Рисунок 1. Стартовая панорама.

Читая эту статью вы уже должны знать как собирается и экспортируется тур. В ней я расскажу о том как сделать запуск со случайной или заранее определенной панорамы. Под виртуальным туром я буду подразумевать тур экспортируемый в формате HTML5. Данная возможность не предоставлена программой Pano2VR и может являться недокументированной.

По умолчанию виртуальный тур запускается с панорамы, называющейся стартовой. В браузере тура она обозначена значком с цифрой 1 в круге (рис. 1). Идентификатор стартовой панорамы будет указан в теге «tour» конфигурационного xml-файла (рис. 2). Чаще это «node1», если не было выбрано другое. По желанию его можно изменить вручную после экспорта тура, открыв конфигурационный xml-файл в любом текстовом редакторе.

Рисунок 2. Исходный код xml-файла.

Откроем в текстовом редакторе HTML-файл, который находится в папке экспорта. Перейдем в строку, где начинается тег <body>. Сразу за этим тегом следует скрипт встраивания просмотрщика в веб-страницу. Теперь в зависимости от требуемого результата будем вносить в этот код некоторые изменения. Для удобства чтения они будут подсвечиваться желтым фоном.

Исходный код по умолчанию выглядит так:

<script type="text/javascript" src="pano2vr_player.js">
</script>
<script type="text/javascript" src="skin.js">
</script>
<div id="container" style="width:100%;height:100%;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
 // create the panorama player with the container
 pano=new pano2vrPlayer("container");
 // add the skin object
 skin=new pano2vrSkin(pano);
 // load the configuration
 pano.readConfigUrl("new_bridge_3seasons.xml");
 // hide the URL bar on the iPhone
 setTimeout(function() { hideUrlBar(); }, 10);
</script>
<noscript>
 <p><b>Please enable Javascript!</b></p>
</noscript>

Случайная панорама.

Предыдущий исходный код модифицирован таким образом чтобы при начальной загрузке тура происходил запуск случайной панорамы. теперь код выглядит так:

<script type="text/javascript" src="pano2vr_player.js">
</script>
<script type="text/javascript" src="skin.js">
</script>
<div id="container" style="width:100%;height:100%;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
 // Количество панорам в туре
 var pano_count = 3;
 // Генерация случайного числа
 var node = Math.floor(Math.random()*pano_count) + 1;
 // create the panorama player with the container
 pano=new pano2vrPlayer("container");
 // add the skin object
 skin=new pano2vrSkin(pano);
 // load the configuration
 pano.readConfigUrl("new_bridge_3seasons.xml");
 // Запуск панорамы 
 pano.openNext('{node' + node + '}');
 // hide the URL bar on the iPhone
 setTimeout(function() { hideUrlBar(); }, 10);
</script>
<noscript>
 <p><b>Please enable Javascript!</b></p>
</noscript>

Выражение Math.floor(Math.random()*pano_count) дает случайное число от 0 до 2. Значение переменной pano_count строго равно количеству всех панорам тура. В моем примере их 3. Если у вас другое количество панорам, задайте pano_count другое значение.

Так как нумерация узлов начинается с единицы, корректируем полученное случайное число прибавлением к нему единицы. Таким образом, переменная node будет принимать значения от 1 до 3.

Метод pano.openNext подсмотрен в skin.js. Это действие «Open Next Panorama». С помощью него можно запустить любую панораму тура. В качестве второго параметра функция принимает строку, записанную в формате Pan / Tilt / FoV. Модифицируем предыдущий код, чтобы при запуске панорамы устанавливались случайные значения Pan / Tilt / FoV.

Случайная панорама со случайными параметрами Pan, Tilt, FoV.

<script type="text/javascript" src="pano2vr_player.js">
</script>
<script type="text/javascript" src="skin.js">
</script>
<div id="container" style="width:100%;height:100%;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
 function getRandomRange(min, max){
 return Math.floor(Math.random() * max) + min;
 }
 var pano_count = 3;
 //Генерация случайного числа
 var node = Math.floor(Math.random()*pano_count) + 1;
 // Случайные значения Pan/Tilt/FoV
 var rpan = getRandomRange(-180, 180);
 var rtilt = getRandomRange(-5, 5);
 var rfov = getRandomRange(50, 80);
 // create the panorama player with the container
 pano=new pano2vrPlayer("container");
 // add the skin object
 skin=new pano2vrSkin(pano);
 // load the configuration
 pano.readConfigUrl("new_bridge_3seasons.xml");
 // Запуск панорамы 
 pano.openNext('{node' + node + '}',
 rpan + '/' + rtilt + '/' + rfov);
 // hide the URL bar on the iPhone
 setTimeout(function() { hideUrlBar(); }, 10);
</script>
<noscript>
 <p><b>Please enable Javascript!</b></p>
</noscript>

Для получения случайного числа из определенного диапазона, добавлена функция getRandomRange().

Панорама в зависимости от времени года.

<script type="text/javascript" src="pano2vr_player.js">
</script>
<script type="text/javascript" src="skin.js">
</script>
<div id="container" style="width:100%;height:100%;">
This content requires HTML5/CSS3, WebGL, or Adobe Flash Player Version 9 or higher.
</div>
<script type="text/javascript">
 // create the panorama player with the container
 pano=new pano2vrPlayer("container");
 // add the skin object
 skin=new pano2vrSkin(pano);
 // load the configuration
 pano.readConfigUrl("new_bridge_3seasons.xml");
 // Определение месяца текущей даты
 var now = new Date();
 var month = now.getMonth();
 // Запуск панорамы 
 if ([5, 6, 7].indexOf(month) !== -1){ 
 // Лето
 pano.openNext("{node1}");
 } else
 if ([0, 1, 11].indexOf(month) !== -1){
 // Зима
 pano.openNext("{node3}");
 } else {
 // Осень или весна (демисезон)
 pano.openNext("{node2}");
 }
 // hide the URL bar on the iPhone
 setTimeout(function() { hideUrlBar(); }, 10);
</script>
<noscript>
 <p><b>Please enable Javascript!</b></p>
</noscript>

В строке var now = new Date(); происходит определение текущей даты, а в следующей за ней строке номер месяца полученной даты.

Далее с помощью условных операторов определяется принадлежность номера месяца поре года и запуск панорамы с соответствующим идентификатором. Нумерация месяцев начинается с нуля: 0 – январь, 2 – февраль, и т.д.

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

Создание VR-панорам и виртуальных туров | Добавил: СЕРГЕЙ ДИШУК (12.03.2016)
1299 | Теги: тур, Pano2VR, определенная, виртуальный, случайная, HTML5, Панорама
Рейтинг: 4.3 / 322 | Оцените материал:

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

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

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

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

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

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

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

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

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

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

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

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

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

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