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

 Работа в Pano2VR | Веб-кодинг в Pano2VR, Редактор оформления (Skin editor)
 04.12.2018    10:00    4.8k    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. У меня есть несколько идей для создания элементов управления, которые можно будет использовать в панорамах или виртуальных турах. Как только они будут реализованы, я об этом напишу в соцсетях. До встречи в следующей части!

Как вам материал?

0 реакции
👍
0
👎
0
😂
0
😱
0
😡
0
😢
0
Поделитесь материалом в социальных сетях

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

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

ТЕГИ МАТЕРИАЛА:
Об авторе

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

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

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

Материалы по теме статьи
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Нет комментариев

Получите доступ к эксклюзивному контенту, оформив платную подписку.

VK Donut
 
Платные темы OK
 
Boosty
 
Patreon
 
Сейчас просматривают
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 46
Последние новости
ChatGPT научился создавать изображения

Раньше обращался к ChatGPT с запросами написания контент-плана, статьи, программного кода. Теперь у ...

 События
 10.04.2025    12:21    563    0
Фотопрогулка по лесу в апреле

Прогулка по лесу с фотоаппаратом – это настоящее удовольствие для души и глаз. Однажды в апреле, ког...

 События
 06.04.2025    18:05    368    0
10 невероятных новостей из мира фотографии, в которые сложно поверить

Фотография – это не просто хобби, а стиль жизни. Каждый день появляются новые технологии, открытия и...

 События
 01.04.2025    14:55    464    0
Последние статьи
Фотосъемка текстур и паттернов

Это направление в фотографии наряду с такими как пейзаж, портрет, макросъемка, предметная фотосъемка...

 Статьи по фотографии
 10.04.2025    10:22    385    0
Зеленый цвет в фотографии и не только

На этих фотографиях в статье доминирует зеленый — цвет жизни, баланса и гармонии. Он окружает нас в ...

 Статьи по фотографии
 08.04.2025    08:50    313    0
Фотосъемка с проводкой: как передать движение в кадре

Съемка с проводкой – это прием фотосъемки, при котором вы ведете камеру за движущимся объектом со ск...

 Статьи по фотографии
 05.04.2025    08:10    486    0
Онлайн всего: 1
Гостей: 1
Пользователей: 0