Веб-кодинг в Pano2VR

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

Функция создания скриншотов создает изображение всей области воспроизведения панорамы в оригинальном размере. Иными словами, размер изображения скриншота будет напрямую зависеть от размеров области, в которой воспроизводится панорамный контент или от разрешения монитора в случае воспроизведения в полноэкранном режиме.

Представим такую ситуацию: пользователь увидел что-то необычное в конкретной панораме вашего виртуального тура и ему захотелось поделиться с другом. Он пишет ему сообщение: перейди по ссылке, найди в меню эскизов панораму с названием «Интересная панорама», кликни и поверни на 180 градусов с наклоном +45 градусов, и ты увидишь парящего зайца.

В Pano2VR уже есть то, что может значительно упростить жизнь пользователям и позволит им делиться адресной ссылкой, содержащей идентификатор панорамы и параметры её вида.

Функционал последних версий Pano2VR позволяет творить невероятные вещи. Сегодня речь пойдет о том, как использовать программу создания виртуальных туров по максимуму.

В рамках этой статьи я не буду затрагивать темы настройки данных панорам, установки вида, экспорта тура и др. Это рассматривалось в других статьях. В примерах использую настройки, которые дает программа по умолчанию.

Pano2VR JavaScript API – это внешний программный интерфейс приложения, который позволяет управлять проигрывателем извне с помощью кода написанного на JavaScript. API позволяет не только управлять просмотром панорамы/тура, но и сохранять и считывать значения переменных, рисовать поверх панорамы, отслеживать события происходящие при просмотре панорамы и даже создать собственную интерактивную оболочку (скин) для виртуального тура.

Это заключительная часть. Все предыдущие части были актуализированы в соответствии с новой документацией: часть 1, часть 2.

Javascript в редакторе оформления можно использовать в двух случаях: в текстовом компоненте и в качестве параметра в вызове метода «Go to URL». В коде скрипта можно использовать абсолютно любые действия, вычисления, и вызовы Pano2VR Javascript API.

При написании JS-кода необходимо руководствоваться следующими правилами:

При помощи CSS-стилей можно стилизовать интерактивное оформление виртуального тура. CSS значительно расширяет дизайнерские возможности редактора оформления.

Когда-то на заре создания виртуальных туров, используя четвертую версию Pano2VR я уже занимался стилизацией оформления с помощью CSS. Тогда в Pano2VR не существовало функционала для работы со стилями. Приходилось после экспорта открывать в редакторе файл skin.js и вставлять названия классов и встроенные стили в исходный код файла.

В предыдущей статье цикла были рассмотрены методы взаимодействия с просмотром и управление полноэкранном режиме. Здесь будет рассмотрены методы работы с узлами виртуального тура и хотспотами. Некоторые методы из предыдущей статьи используются в демо-примерах. Рекомендую начать чтение с первой статьи цикла.

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