Pano2vr как сделать тур

Добавление в виртуальный тур карты для навигации (Pano2VR)

Добавление в виртуальный тур карты местности.

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

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

Рисунок 1. Изображение карты местности.

После того как изображение карты готово, откроем редактор шаблона и создадим шаблон маркера узла, на основе которого будут создаваться маркеры, располагаемые на карте. Для этого активируем режим добавления маркера узла кнопкой на панели инструментов или с помощью комбинации клавиш Ctrl+M. После нажатия кнопки мыши в области редактора (холсте) появится элемент «Маркер узла (Node Marker)». Созданному элементу необходимо дать имя «markertemplate».

Рисунок 2. Добавление элемента Маркер узла .

Для отображения активного и неактивного состояния маркера узла будут служить 2 изображения. Добавим их на холст, перетаскиванием в область редактора из Проводника или файлового менеджера (например, Total Commander) и расположим где-нибудь поближе к маркеру узла.

Рисунок 3. Добавление элементов, отображающих состояния маркера узла.

Элементу, который будет отображать активное состояние, дадим имя «marker_active», а элементу, отображающему неактивное состояние – «marker_normal». Имена этих элементов могут быть любыми. Главное, чтобы смысл имен был понятен.

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

Рисунок 4. Свойства элемента Маркер узла.

В настройках маркера узла в группе Node Marker (Маркер узла). В свойстве «Clone as Normal» выбираем идентификатор (ID) marker_normal, а в свойстве «Clone as Active» − marker_active.

Рисунок 5. Связывание маркера узла с элементами, отображающих состояние.

Не лишним будет добавить текстовую подсказку, появляющуюся при наведении на маркер узла. Активируем режим добавления текста кнопкой на панели инструментов (Ctrl+T). После нажатия кнопки мыши в области редактора (холсте) появится элемент Текст.

Рисунок 5. Добавление текстовой подсказки .

Назовем элемент «marker_title». Зададим ему размер, форму прямоугольника, цвет, а также отключим свойство Visible (Видимость) в группе настроек Appearance (Внешний вид). Положение текстового поля зададим такое, чтобы оно располагалось ниже маркера и по центру (Ориентируемся на клон marker_normal).

Рисунок 6. Свойства текстового поля.

В группе настроек Text (Текст), в свойстве текст укажем заменитель «$ut». Этот заменитель берет данные из строки Заголовок, определяемой в настройках «Пользовательские метаданные». Другие свойства можете настроить по своему желанию.

Рисунок 7. Действия для элемента markertemplate.

После всех настроек текстовой подсказки активируем в дереве объектов элемент маркера узла и в списке Actions (Действия) добавляем два действия как показано на рисунке.

Рисунок 8. Элементы шаблона в контейнере.

Активируем режим добавления контейнера кнопкой на панели инструментов (Ctrl+K) и выделим все добавленные элементы «резиновой» рамкой. Все выделенные элементы попадут в контейнер. Свойство Visible (Видимость) контейнера установим в отключенное положение. Кроме этого можно задать отрицательные значения позиции, чтобы убрать контейнер за пределы окна.

Читайте также:  Как сделать png печати

На этом настройка шаблона маркера завершена. Отключим отображение контейнера, нажав на значок глаза в дереве объектов и добавим на холст изображение карты.

Рисунок 9. Изображение карты в редакторе оформления.

Теперь разместим на добавленном изображении карты маркеры узлов. Для этого расположим окно редактора шаблона так, чтобы иметь доступ к браузеру тура.

Для добавления маркера узла перетащим все узлы из браузера тура в редактор шаблона. Маркер будет создан автоматически на основе созданного ранее шаблона. Не забывайте после добавления маркера активировать в дереве объектов или на холсте элемент карты.

Посмотрите это видео, в котором я добавляю новые маркеры на карту.

В случае необходимости положение маркеров можно изменить.

На этом создание карты и расположение на ней маркеров узлов завершено. Осталось только определить, как будет отображаться карта. Дальнейшие действия, описанные в статье вам могут не понадобиться.

Рисунок 10. Карта с добавленными маркерами узлов.

Размер карты у меня получился очень большим. Поэтому она может не поместиться в окне просмотра тура. Для решения этой проблемы я сделал небольшое окно, в котором будет отображаться небольшая часть карты (рис. 11). Доступ к другим частям карты будет осуществляться с помощью четырех элементов стрелок, выполняющих прокрутку в определенном направлении.

Рисунок 11. Общий контейнер.

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

Рисунок 12. Контейнер карты.

Изображение карты с маркерами помещено в отдельный контейнер (рис. 13). У этого контейнера включено свойство Masking. Располагаем изображение карты на контейнере так, чтобы её левый верхний угол совпадал с верхним левым углом контейнера (или немного выходил за его пределы).

Рисунок 13. Расположение карты в контейнере.

Для кнопок прокрутки карты определены действия Change Relative Position по нажатию кнопки мыши.

Рисунок 14. Просмотр карты в окне Live Preview.

Добавление в виртуальный тур плана здания.

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

Специально для плана здания я создал такой шаблон.

Рисунок 15. Шаблон маркера узла для плана здания.

Оранжевая точка означает местоположение, в которое переместится пользователь, просматривающий виртуальный тур. Желтый значок человека будет обозначать текущее местоположение (рис. 15). Оба изображения сделаны одинакового размера и с прозрачным фоном.

Текстовая подсказка будут выводиться под маркером. Размер текстового поля определяется по содержимому, а текст выравнивается по центру (рис. 16).

Рисунок 16. Свойства текстового поля.

Текстовая подсказка будет отображаться при наведении на маркер узла курсора мыши и скрываться, когда курсор покидает маркер узла (рис. 17). При активации маркера происходит установка положения элемента радара в положение маркера узла. О радаре будет написано чуть ниже.

Рисунок 17. Действия элемента Маркер узла.

После размещения точек перехода на плане (рис. 18), добавим элементы, которые будут выполнять роль радара.

Рисунок 18. Размещение точек перехода на плане.

Радар состоит из двух элементов: окружности и точки, которая будет указывать направление просмотра. Окружность и точка выполнены с помощью элемента Прямоугольник. Слишком большое значение радиуса закругления (100 и выше) превращает прямоугольник в окружность.

Рисунок 19. Элемент радара.

Вращение радара задано с помощью модификаторов Pan North — Rotate. Корректировочный коэффициент равен 140 для правильного ориентирования радара. Для всех панорам должно быть определено направление на Север.

Рисунок 20. Модификаторы для радара.

Чтобы определить поправочный коэффициент я нашел угол поворота здания на плане (серый цвет) относительно его положения на карте (оранжевый цвет). Схематически это показано на рис. 21.

Читайте также:  Как сделать галтеля угол

Рисунок 21. Определение поправочного коэффициента.

В следующей статье читайте, как добавить в интерфейс панорамы или тура карту Google Map.

—Категория:!——>Встраивание карт и планов | —> 7625 | —> 17.03.2016 —> 18:00 | —>Теги : План, виртуальный, карта, тур, маркер, HTML5, точка, Pano2VR, радар, перехода Рейтинг: 5.0 / 565 | Оцените материал:
  • 1
  • 2
  • 3
  • 4
  • 5

Об авторе:

Сергей Дишук, фотограф-любитель. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения. Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 7-ми лет. Имею опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

Поделиться в социальных сетях:

Возможно, вам будет интересно:

Встраивание в оформление проекта Pano2VR карты Google

Запуск виртуального тура со случайной или определенной панорамы (Pano2VR)

Анимированные хотспоты в Pano2VR

Pano2VR — Создание шаблона оформления (компас, радар, хотспоты)

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

Как сделать правильный курсор в виртуальных турах Pano2VR

Источник

Статьи по работе с программой Pano2VR

Основываясь на своем опыте работы с Pano2VR, написал несколько статей по работе с программой, в которых рассказываю о том, как создавать проект, как автоматизировать работу с проектами, как создать шаблон для панорамы или виртуального тура и многое другое. Статьи имеют как теоретический, так и практический характер. Версия программы, использованная при написании статей, – 4.5.3 Pro. К более ранним и более поздним версиям программы, а также к обычной версии (не Pro) некоторые моменты, описанные в статьях, могут не подходить.

Ниже приведены ссылки на все статьи, связанные с программой Pano2VR.

—Категория:!——>Обновления сайта | —> 2207 | —> 04.04.2016 —> 17:20 | —>Теги : Pano2VR4, HTML5, flash, редактор шаблона, Модификаторы, Pano2VR, сборник статей, карта, действия, Статьи Рейтинг: 0.0 / 0 | Оцените материал:
  • 1
  • 2
  • 3
  • 4
  • 5

Об авторе:

Сергей Дишук, фотограф-любитель. Снимает пейзажи, животных, репортажи различных городских мероприятий. Увлекается программированием и разработкой программного обеспечения. Занимается съемкой панорам и созданием виртуальных туров более 7-ми лет. Имеет опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR, Autopano, Panotour.

Что вы думаете по этому поводу? Напишите об этом в комментариях ниже.

Поделиться в социальных сетях:

Возможно, вам будет интересно:

Итоги уходящего 2018 года

Итоги уходящего 2016 года

Движок HTML5. Некоммерческие услуги. Мое портфолио.

Источник

Как сделать виртуальный тур из 3D панорам

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

Стоимость панорамы 360 (точки съемки) от 1000 руб. Размещение 3D тура на сайте — 500 руб. Загрузка 3D панорам в Яндекс, Google.

Москва
Нижний Новгород, Воронеж, Тула, Тверь, Владимир
+7 985 736 7376
Санкт-Петербург
Лен. обл.
+7 981 821 5816
Екатеринбург
Челябинск, Новосибирск, Пермь, Тюмень
+7 985 736 7376
Ростов-на-Дону
Волгоград, Самара, Астрахань
+7 918 853 6755
Краснодар
Сочи, Анапа
+7 918 853 6755
Ставрополь
Пятигорск, Невинномысск
+7 918 874 9678

В прошлой статье мы разобрали все этапы панорамной фотосъемки и получили снимки с обзором на 360 градусов. Эти фотографии являются сферическими панорамами в эквидистантной проекции:

Такие панорамы можно снять на обычный смартфон, камеру 360 или зеркальный фотоаппарат. Более подробно ознакомиться с панорамной фотосъемкой в отдельно статье:

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

Читайте также:  Как сделать валяный жилет

Существует несколько приложений для монтажа 3D туров. Выбирать наиболее подходящую для себя стоит исходя из уровня подготовки.

Выбор программы для создания 3D тура

Krpano

KRpano – профессиональное ПО для разработки виртуальных туров. Этот софт обладаем огромными возможностями настройки тура и интеграции интерактивных дополнений. Отличительная особенность программы в том, что большая часть работы заключается в ручном редактировании программного кода. Поэтому KRpano подойдет далеко не всем пользователям.

Pano2VR

Pano2VR – одно из наиболее простых приложений для монтажа 3D туров. В отличие от предыдущей программы Pano2VR имеет интуитивно понятный интерфейс. Кроме стандартных функций, данный софт обладает возможностями редактирования отдельных частей панорамы, создания видеороликов из сферической панорамы и загрузки 3D тура в карту Google.

3D VISTA VIRTUAL TOUR PRO

3D VISTA VIRTUAL TOUR PRO – программа с удобно реализованными инструментами мультимедийного наполнения виртуального тура. Встроенные возможности позволяют легко добавить в панораму текстовую информацию, фото или видео.

Создание 3D тура в Pano2VR

Для неопытных пользователей рекомендуем использовать Pano2VR. В этой программе можно сделать виртуальный тур всего за несколько простых шагов. К тому же, Pano2VR имеет полностью русифицированный интерфейс.

Добавление панорам

Загрузим исходные панорамные снимки в программу. Для этого нажимаем кнопку «Импорт» и выбираем в заданной папке все панорамы.

На нижней панели отобразятся изображения каждой панорамы. Мы можем выбрать любую из них и покрутить панораму в окне предпросмотра.

Объединение панорам

Теперь объединим все сцены между собой. Для этого требуется расставить точки перехода (стрелки) из одного места в другое.

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

На левой панели появятся свойства элемента. Здесь указываем:

  • Тип — Связка тура
  • Целевая URL ссылка – выбираем номер панорамы для перехода

Таким же образом объединяем все остальные смежные панорамы.

Кроме обычных стрелок переход между сценами можно выполнить при помощи полигонального выделения предметов. Любой объект (дверь, здание) выделяется инструментом «Многоугольные активные зоны» и становится активным.

Многоугольная активная зона в Pano2VR

Мультимедийное наполнение 3D тура

В виртуальный тур можно добавить различные интерактивные вставки. Последние четыре инструмента в окне предпросмотра предназначены именно для этого:

  • Фоновая музыка или звуки отдельных частей панорамы.
  • Вставить фотографию, которая будет увеличиваться при нажатии.
  • Интеграция видеоролика для просмотра внутри сцены.
  • Активный блик при повороте к источнику света (например, солнце или светильник).

Сохранение виртуального тура

Когда все элементы добавлены остается только экспортировать виртуальный тур. Нажимаем кнопку «Экспорт» на верхней панели. В правой части программы появятся параметры экспорта:

  • Настройки автовращения и анимации.
  • Настройки переходов и активных зон.
  • Включение vr режима просмотра.
  • Параметры html.
  • Настройки управления.
  • Качество изображения.
  • Дополнительные параметры.

Настройки экспорта 3D тура

В разделе шаблон можно выбрать одно из стандартных меню управления 3D туром. Если требуется создание индивидуального дизайна, предусмотрен удобный редактор шаблона.

Редактор шаблона меню

Все параметры устанавливаются в зависимости от поставленной задачи. Когда все готово нажимаем на кнопку «Создать вывод» в виде шестерёнки. Программа сохранит файлы в папке «output». Теперь все готово к размещению 3D тура на сайте.

Выводы

Мы разобрались как сделать стандартный виртуальный тур за несколько простых шагов. Конечно, это наиболее простой вариант реализации. Если требуется создать более индивидуальный вариант с интерактивными дополнениями потребуется более детальная работа с графикой и интерактивными дополнениями. В этом случае лучше использовать более продвинутый софт для 3D туров, например, KRpano.

Источник

Поделиться с друзьями
Ответ и точка