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