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