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

 Работа в Pano2VR | Веб-кодинг в Pano2VR, Редактор оформления (Skin editor)
 04.12.2018 |  10:00 |  3.9k |  5.0/1 |  12.04.2023
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
При помощи этого API можно создать собственное оформление виртуального тура, без использования редактора оформления (Skin Editor).

Изучаем 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.getPanN();

Дополнено Получение текущего угла поворота в нормализованном виде (от -180,0 до +180,0).

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.getHFov();

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

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 – угол обзора.

pano.setProjection(v: Number);

Дополнено Установка проекции вида.

pano.getProjection():Number;

Дополнено Получение текущей проекции вида.

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

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

Параметры:

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

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

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

Параметры:

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

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

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

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

Параметры:

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

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.setAutorotateNodeFilter(tag: String);

Дополнено: Фильтрация узлов для автоматического вращения. Аргумент tag определяет тег узла тура, в котором будет активироваться автоматическое вращение при автоматическом переключении узлов.

pano.getIsAutorotating();

Дополнено: Возвращает true, если в данный момент автоматическое вращение активно.

pano.startAnimation(animsequence: String);

Дополнено: Воспроизведение заданной последовательности анимаций.

pano.stop();

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

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

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. У меня есть несколько идей для создания элементов управления, которые можно будет использовать в панорамах или виртуальных турах. Как только они будут реализованы, я об этом напишу в соцсетях. До встречи в следующей части!

Теги:  skin editor, Виртуальный тур, HTML5, Панорама, javascript, API, Оформление, Pano2VR
Об авторе

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

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

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

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

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

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

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