Tour-player

Гибкое решение для создания и комфортного просмотра виртуальных туров на ПК, телефоне и в VR очках

Для того чтобы отснятые 3D панорамы было можно удобно просматривать и навигироваться между ними, мы разработали свой плеер виртуальных туров – Tour-player. Гибкость плеера позволяет нам разрабатывать виртуальные тура любой сложности.

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

Возможности

  • Поддержка различных устройств

    Наш плеер плавно работает на всех популярных устройствах

  • Локализация

    Интерфейс переведен на 5 популярных языков: Русский, Английский, Немецкий, Китайский, Украинский.

  • Простота в разработке

    Гибкий и лаконичный синтаксис описания панорам и связей между ними, простая интеграция плеера на сайт

  • Кастомизация

    Возможность адаптировать интерфейс плеера под ваш фирстиль

  • Видео

    Возможность интеграции видео фрагментов, например анимированный огонь в камине или девушка на ресепшене

  • Виртуальная реальность

    Работа в очках виртуальной реальности таких как Oculus Go, Gear VR, Daydream и CardBoard

  • Навигация

    Удобная навигация по туру, перемещение при помощи клавиатуры, мыши, касания, наклонов и поворотов

  • Интерактивные элементы

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

  • Расширяемость

    На базе нашего плеера можно создать полноценный интернет магазин или удобный инструмент по бронированию столиков в ресторане

Использование

Для начала работы вставьте следующий код к себе на страницу:

между тегов head:

<link rel="stylesheet" href="//tour-360.ru/tour-player/2.2.2/tour-player.css">
  <script src="//tour-360.ru/tour-player/2.2.2/tour-player.js"></script>

Перед тегом </body>:

<script>
    Tour.init('manifest.json', {
      controlPanel: false,
      gallery: true
    });
  </script>

Tour.init(manifest, options)

После подключения скриптом в глобальной области видимости появиться объект Tour. Для инициализации тура необходимо выполнить функцию Tour.init() c двумя параметрами:

  • manifest, Строка с именем файла описания тура
  • options, Объект опций тура

Доступные опции

ОпцияЗначение по умолчаниюОписание
kineticRotateSpeed0.1Кинетическая скорость вращение панорамы
autorotationSpeed-0.5Скорость автоматического вращения
transitiontrueПлавные переходы
mouseMenutrueМеню мыши (true — Показывать, false — не показывать, undefined — Отменить)
controlPaneltrueПанель управления
scaleControltrueВозможность масштабировать (приближать)
autorotationTimeoutfalseВремя бездействия для автовращения в миллисекундах
galleryflaseГалерея

Подписания на события

Для подписания на события тура используется функция Tour.on() принимающая атрибута: имя события (строка) и функцию callback

Tour.on('load', function(){
    console.log('load!')
  });

Возможные события:

  • load – полная загрузка тура
  • options – переход между панорамами
  • render – отрисовка сцены
  • touchstart – начала вращения панорамы
  • touchmove – начала вращения панорамы
  • touchend – окончания вращения панорамы
  • moveView – вращение камеры