Главная » Статьи » Pano2VR

Запуск виртуального тура со случайной или определенной панорамы (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 панорамы, сделанные в разное время года с одного и того же места. Так как сейчас весна, будет загружаться демисезонная панорама (сделана осенью). Перейдя по той же ссылке летом, загрузится летняя панорама.

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

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

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

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

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

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

comments powered by HyperComments
Недавние панорамы

Список последних опубликованных сферических панорам

Рубрикатор
Случайная панорама
Опрос
Какие разделы сайта Вам интересны?
Всего ответов: 22
Я в социальных сетях
  1. Вконтакте
  2. Одноклассники
  3. Facebook
Последние комментарии
comments powered by HyperComments