Изучаем Pano2VR Javascript API. Часть 1.
При помощи этого API можно создать собственное оформление виртуального тура, без использования редактора оформления (Skin Editor).
1 5 0.0 0

Изучаем Pano2VR Javascript API. Часть 1.

Изображение

Pano2VR Javascript API – это набор методов, обеспечивающих взаимодействие пользователя с проигрывателем панорамного контента. При помощи этого API можно создать собственное оформление виртуального тура, без использования редактора оформления (Skin Editor). Вернее, оформление можно создать средствами HTML и CSS, а наделить его интерактивностью помогут методы Javascript API.

Методов Javascript API много, поэтому данный материал будет разбит на несколько частей.

pano – это назначенное по умолчанию имя объекта, который создается при инициализации просмотрщика в Javascript конструкции:

<script type="text/javascript">
if (ggHasHtml5Css3D() || ggHasWebGL()) {
 //Создание объекта просмотрщика
 pano=new pano2vrPlayer("container");
 //Чтение конфигурации из xml-файла 
 pano.readConfigUrlAsync("pano.xml");
}
</script>

Если этому объекту вы захотите назначить другое имя, то все перечисленные ниже методы следует вызывать от этого имени.

Методы взаимодействия с просмотром

pano.getPan();

Получение текущего угла поворота относительно нулевого направления – центра панорамы.

pano.getPanNorth();

Получение текущего угла поворота относительно заданного направления на Север.

pano.setPan(angle_in_degrees: Number);

Установка произвольного угла поворота, определяемого параметром angle_in_degrees (значение угла в градусах) относительно нулевой точки.

Если angle_in_degrees имеет положительное значение, поворот будет произведен в левую сторону. Если отрицательное – в правую.

pano.setPanNorth(angle_in_degrees: Number);

Установка произвольного угла поворота, определяемого параметром angle_in_degrees (значение угла в градусах) относительно направления на Север.

Если angle_in_degrees имеет положительное значение, поворот будет произведен в левую сторону. Если отрицательное – в правую.

pano.changePan(offset_in_degrees: Number);

Изменение угла поворота. Параметр offset_in_degrees определяет смещение в градусах относительно текущего угла поворота.

Если offset_in_degrees имеет положительное значение, поворот будет произведен в левую сторону. Если отрицательное – в правую.

pano.getTilt();

Получение текущего угла наклона.

pano.setTilt(angle_in_degrees: Number);

Установка произвольного угла наклона, определяемого параметром angle_in_degrees (значение угла в градусах) в диапазоне от -90 до +90.

Если angle_in_degrees имеет положительное значение, наклон будет произведен вверх. Если отрицательное – вниз.

pano.changeTilt(offset_in_degrees: Number);

Изменение угла наклона. Параметр offset_in_degrees определяет смещение в градусах относительно текущего угла поворота.

Если offset_in_degrees имеет положительное значение, наклон будет произведен вверх. Если отрицательное – вниз.

pano.getFov();

Получение текущего горизонтального угла обзора.

pano.setFov(angle_in_degrees: Number);

Установка произвольного горизонтального угла обзора, определяемого параметром angle_in_degrees (значение угла в градусах) в диапазоне заданных ограничений.

pano.changeFov(offset_in_degrees: Number);

Изменение горизонтального угла обзора. Параметр offset_in_degrees определяет смещение в градусах относительно текущего горизонтального угла обзора.

pano.getVFov();

Получение текущего вертикального угла обзора.

pano.setVFov(angle_in_degrees: Number);

Установка текущего вертикального угла обзора, определяемого параметром angle_in_degrees (значение угла в градусах).

pano.getRoll();

Получение угла поворота в горизонтальной плоскости.

pano.setRoll(angle_in_degrees: Number);

Установка угла поворота в горизонтальной плоскости, определяемого параметром angle_in_degrees (значение угла в градусах).

pano.setPanTilt(pan: Number, tilt: Number);

pano.setPanTiltFov(pan: Number, tilt: Number, fov: Number);

Установка вида в позицию, определяемую параметрами функций.

Параметры:

  • pan – угол поворота;
  • tilt – угол наклона;
  • fov – угол обзора.

player.setDefaultView(pan: Number, tilt: Number, fov: Number);

Установка настроек вида по умолчанию для текущего узла.

Параметры:

  • pan – угол поворота;
  • tilt – угол наклона;
  • fov – угол обзора.

pano.moveTo(pan: Number, tilt: Number, fov: Number, speed: Number);

Перемещение вида в произвольную позицию, определяемую параметрами функции.

Параметры:

  • pan – угол поворота;
  • tilt – угол наклона;
  • fov – угол обзора;
  • speed – скорость изменения.

pano.moveToDefaultView();

Перемещение вида в позицию по умолчанию, определяемую настройками вида узла.

pano.setDefaultView();

Установка вида в позицию по умолчанию, определяемую настройками вида узла.

pano.setAutorotate(speed: Number, delay: Number, rth: Number);

Установка параметров автоматического вращения.

pano.startAutorotate(speed: Number, delay: Number, rth: Number);

Запуск автоматического вращения.

pano.toggleAutorotate(speed: Number, delay: Number, rth: Number);

Запуск / остановка автоматического вращения.

Параметры:

  • speed – скорость и направление (определяемое знаками +/-) автоматического вращения, °/кадр.;
  • delay – задержка (таймаут бездействия пользователя), сек.;
  • rth – время возврата в горизонтальное положение, сек.

pano.stopAutorotate();

Остановка автоматического вращения.

pano.stop();

Остановка всех автоматических перемещений.

pano.changeProjection(projection: Number, speed: Number);

Изменение проекции вида.

Параметры:

  • projection – число, определяющее проекцию: 4 – нормальный вид; 9 – стереографическая проекция (маленькая планета); 12 – фишай;
  • speed – скорость изменения проекции.

Управление полноэкранным режимом

pano.setFullscreen(flag: Boolean);

Устанавливает режим в соответствии со значением переменной flag. Если flag = true, происходит переход в полноэкранный режим, в противном случае произойдет выход из него.

pano.enterFullscreen();

Устанавливает полноэкранный режим.

pano.exitFullscreen();

Выходит из полноэкранного режима.

pano.toggleFullscreen();

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

pano.getIsFullscreen();

Получает состояние полноэкранного режима (true / false).

Примеры

В примерах назначение метода прописывается в событии "onclick" элемента управления (кнопки).

<button
class="btn"
id="autorotate"
onclick="pano.toggleAutorotate(-5, 3, 2);">
AR
</button> <button
class="btn"
id="def-view"
onclick="pano.moveToDefaultView(10);">
Def
</button>

Более сложные конструкции функции, обрабатывающие длительные нажатия на элементы управления (кнопки) назначаются при помощи библиотеки jQuery.

<button
class="btn"
id="pan-left">

</button>
$("#pan-left").mousedown(function(){
 //Создаем таймер, который раз в 50 мсек
 //будет выполнять заданное действие
 var pressedTimer = setInterval(
function() { pano.changePan(5); },
50); //При отпускании мыши убираем таймер, //чтобы действие не выполнялось $(this).mouseup(function() { clearInterval(pressedTimer); $(this).unbind("mouseup"); return false; }); //При покидании курсора мыши кнопки, //если она была нажата, также убираем таймер $(this).mouseleave(function() { clearInterval(pressedTimer); return false; }); return false; });

Код можно доработать, добавив, например, проверку нажатой кнопки мыши: правая или левая и при при нажатии правой не выполнять код.

Если кому-то нужен код на чистом Javascript, пишите в комментарии.

Демонстрационные примеры не оптимизированы под мобильные устройства. Рекомендуется просмотр в браузерах на ПК.

Конечно не всё из примеров можно использовать как что-то полноценное. Они лишь служат для демонстрации работы методов Pano2VR Javascript API. У меня есть несколько идей для создания элементов управления, которые можно будет использовать в панорамах или виртуальных турах. Как только они будут реализованы, я об этом напишу в соцсетях. До встречи в следующей части!

04.12.2018 | Редактор оформления (Skin editor) | Добавил: СЕРГЕЙ ДИШУК
44 | Теги: Pano2VR, Skin Editor, Панорама, Javascript, HTML5, оформление, Виртуальный тур, API
Рейтинг: 0.0 / 0 | Оцените материал:

Об авторе:

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

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

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

Возможно, вам будет интересно:

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

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

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

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

Популярные страницы
Опрос
Как помогают Вам мои материалы по работе с Pano2VR?
Всего ответов: 13