Приветствую. Месяц назад в одном из выпусков я рассказывал про создание 3D панорам. Тогда же было дано обещание, выпустить материал по созданию виртуального тура из этих самых панорам. Что ж раз пообещал нужно выпускать. Дорогие друзья, в этот пятничный вечер, хочу представить вашему вниманию подробную и максимально простую инструкцию по реализации виртуального 3D тура своими руками.

Для чего и кому вообще нужны виртуальные экскурсии? Начнём с того, что они позволяют отлично передавать атмосферу любого места. Так если вы выбираете учебное заведение для поступления на конкретную специальность, то признайтесь гораздо удобнее вечерком сесть за ноутбук и подробнейшим образом рассмотреть все интересующие лаборатории. У вас появляется возможность без всякого давления разглядеть всё оборудование, которое используют в процессе обучения. 3D тур позволит вам побродить по мастерским, рассмотреть детали и проникнутся соответствующей атмосферой.

Как показывает практика, помимо учебных заведений такие экскурсии востребованы и в других сферах. Все современные рестораны, торговые центры, базы отдыха, гостиницы и другие места, требующие постоянного трафика новых клиентов, стараются как можно скорее обзавестись красивым виртуальным туром на собственном сайте. Интерактивная экскурсия является мощнейшим средством по привлечению новых клиентов. Любая организация, имеющая в распоряжении 3D тур, экономит кучу времени и денег. Так что же нам мешает пополнить список таких организаций и попутно заработать свою копеечку?

Ну как копеечку… В среднем стоимость за 1 качественную панораму у фотографов идёт от 100 долларов и выше. Помножьте эту цифру на количество точек (панорам) в туре. Нехило так получается, правда? Думаю, мотивацию научиться делать виртуальные 3D туры и продвигать их вы получили. Давайте я уже, наконец, продемонстрирую процесс сборки тура. И прежде чем приступить, нам нужно подготовить всё самое необходимое, дабы в дальнейшем не отвлекаться и сконцентрироваться исключительно на создании экскурсии.

Загрузка и установка Panotour Pro

Шаг 1. Скачиваем из Интернета самостоятельно или по ссылке программный продукт Kolor Panotour Pro 2.5.1. В принципе можно пользоваться любой версией выше 2.0. С выходом обновлений интерфейс принципиальных изменений не претерпел. ПОСЛЕ ЗАГРУЗКИ ОТКЛЮЧАЕМ ИНТЕРНЕТ НА КОМПЬЮТЕРЕ И ВЫРУБАЕМ АНТИВИРУС (если этого не сделать, то можно получить кучу проблем с установкой Panotour).

Шаг 2. Запускаем установочный файл, соответствующий разрядности вашей операционной системы и во всех окнах жмём на «Далее».

Шаг 3. На рабочем столе находим ярлык Kolor Panotour Pro 2.5 и запустив программу нажимаем на кнопку «Зарегистрировать».

Шаг 4. В скачанной нами папке с установкой есть файл Serial. txt. Берём из него e-mail и ключ для активации программы.

Шаг 5. Забиваем эти данные в соответствующие поля и жмём «Ок». Если всё сделано, верно, то вы увидите сообщение о том, что регистрация состоялась. Жмём на «Ок» и переходим непосредственно к подготовке графических материалов.

Подготовка графических материалов

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

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

Создание проекта 3D тура

Шаг 8. При выключенном интернете запускаем Kolor Panotour Pro и во вкладке «Tour» выбираем пункт «Add Panorama» (добавить панорамы). В проводнике выбираем наши заранее подготовленные картинки панорам и жмём «Открыть».

Шаг 9. Давайте сразу сохраним и проверим наш проект хотя бы в сыром виде. Для этого в верхнем меню выбираем «File-Save projet As…» и создаём новую папку для сохранения нашего проекта.

Шаг 10. Затем переходим во вкладку «Build» и указываем место расположения готового тура. Я, пожалуй, укажу папку на рабочем столе. После нам необходимо назвать наш тур. Главное, чтобы и папка и название тура были на английском языке, это поможет впоследствии избежать проблем с выкладыванием на сайт. В принципе для создания самого базового виртуального тура из панорам всё готово. Кликаем на «Build tour», ждём завершения сборки и смело нажимаем на кнопочку «Плей».

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

Навигация в виртуальном туре

Шаг 12. Для изменения очерёдности порядка появления панорам в нашем туре переходим во вкладку «Tour» и справа открываем раскрывающееся меню «Order». С помощью мыши перемещаем вверх ту панораму, которая должна первостепенно отображаться в нашей экскурсии. У меня это коридор. Ведь с чего ещё может начинаться путешествие по этажу?

Шаг 13. Теперь неплохо было бы добавить панель навигации. В данной версии программы все подобные фичи разработчики реализовали в виде отельных модулей, которые можно объединять в пресеты. Однако есть и стандартные наборы пресетов. Давайте рассмотрим один из них. Переходим на вкладку «Style» и жмём на кнопку «Load preset…». Затем выбираем из появившегося списка «Kolor iControl». Кликаем на «Load».

Шаг 14. Слева из появившегося списка выбираем «IControl Bar» и выставляем положение навигационной панели по центру. Также можно поиграться с элементами управления. Я обычно оставляю всё по умолчанию, лишь снимаю галочку с кнопки помощи и поддержки и добавляю «Show/hide floorplan». Если есть желание, то можно добавить изюминку в виде особенного цвета кнопок в нашей экскурсии. Допустим, выберу синий.

Шаг 15. Отлично. Теперь давайте объединим наши панорамы по группам. Если мы делаем виртуальный тур по одному зданию, то логичнее всего разделить наши панорамки с кабинетами на этажи. Для этого возвращаемся во вкладку «Tour» и, выделив все изображения, нажимаем правую кнопку. Выбираем «merge in a group», что по-нашему значит – «объединить в группу».

Шаг 16. Далее справа присваиваем имя нашей группе.

Шаг 17. Не медля возвращаемся к вкладке «Style» и удаляем слева пункт «Panorama Menu» нажав на крестик. Далее справа выбираем из списка «Menu-Panorama Combobox» и кликаем на него два раза левой кнопкой, тем самым добавляя данную фичу в список стилей. Выбрав её слева настраиваем позицию, в которой будут расположены на экране названия кабинетов. Затем задаём настройку, отвечающую за вывод названий групп и самих панорам. Это удобно, когда в здании много этажей.

Добавление точек перехода

Шаг 18. Такс. Сейчас самое сложное. Нужно сделать хотспоты. Хотспоты – это такие точки для переходов между панорамами. Для их добавления нам потребуется перейти во вкладку «Tour» и выбрав первую панораму коридора на панели хотспотов указать на значок «Add polygon». Далее для удобства можно развернуть панораму на весь экран.

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

Шаг 20. Далее внимательно выбираем точки переходов и указываем к каким кабинетам они относятся.

Шаг 21. Аналогичным образом поступаем с дверьми в самих кабинетах. Они должны непременно вести в коридор.

Поэтажный план с радаром

Шаг 22. В принципе уже не плохо. Но всё ещё не торт. Давайте добавим карту. Не зря же мы подготовили её заранее. Во вкладе «Tour» выбираем «Floor Map» и указываем путь к нашему поэтажному плану. Добавили? Отлично. Теперь пользуясь инструментом «Add Point» наносим на карту точки соответствующие нашему нахождению в пространстве во время фотосессии.

Шаг 23. Не забываем присвоить каждой точке на карте соответствующую локацию. В нашем случае это кабинеты и коридор.

Шаг 24. Так. Теперь нужно этот самый поэтажный план добавить в нашу экскурсию и настроить. Для этого в уже полюбившейся вкладке «Style» добавляем с правой панели пункт «Maps-Floor plan» и выполняем следующие действия. Перво-наперво выберем место расположения на экране и отступ от края. Скажем пикселей 10. Размер карты пускай будет 260 пикселей в ширину и 513 в высоту. К этим показателям я пришёл экспериментальным путём. Обводку контейнера и отступ от рамки до карты сбрасываю на 0. Ибо в данном случае будет смотреться не очень.

Шаг 25. Листаем ниже. И выбираем из раскрывающегося списка «Single floor plan». Это значит, что мы используем один поэтажный план здания, а не несколько. Чуть ниже снимаем галочку с параметра отображения названия нашего плана. В настройках «Spots» задаём для красоты пульсирующую анимацию и включаем параметр отмечающий за отображения названия меток при наведении курсором. Ниже активируем радар и настраиваем для него цветовую гамму. Я как всегда склоняюсь в сторону синего оттенка.

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

Шаг 27. Всё. Пожалуй, теперь наш виртуальный тур просто шикарен. Давайте сохраним его и посмотрим, что же получилось в итоге. Для этого жмём на кнопку «Собрать тур» и дождавшись сборки кликаем на привычный зелёный значок «Play».

Шаг 28. В итоге у нас открывается наш виртуальный тур. Главное окно содержит удобный плагин меню, для вывода списка всех панорам. Поэтажный план здания с радаром, для лучшей ориентации в большом пространстве. Панель навигации с кнопками, которые позволяют приближать и отдалять изображение, активировать медленное автовращение, включить-выключить показ карты и свернуть всю панель навигации. Для перехода между панорамами удобнее всего пользоваться хотспотами, которые мы выставили на дверях кабинетов. В данном туре у нас 4 панорамы (13, 14, 15 кабинет и коридор), путешествие между которыми не вызывает никаких трудностей, за счёт интуитивно-понятных переходов реализованных посредством дверей в аудиториях.

Публикация тура на сайте

Шаг 29. На этом можно было бы закончить повествование, однако ещё не всё готово. Теперь нам предстоит выложить виртуальную экскурсию на действующий сайт. Для этого перекидываем папку с data файлами тура и HTML файл на хостинг.

Шаг 30. Далее нам необходимо вставить в страницу код с указанием размеров и ссылки на HTML файл тура.

В данном коде https://kurets. ru/images/grafica/virtualnuyu-ekskursiyu/VTourPo2Korpysy. html — это адрес главного файла 3D тура, а параметры width и height отвечают за ширину и высоту контейнера, в котором будет отображаться 3D тур. Если необходимо развернуть панораму на весь экран, то просто киньте на текстовую строчку гиперссылку, ссылающуюся на HTML файл. После вставки на вашей странице появится вот такая замечательная виртуальная экскурсия.

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

Уф. Наконец-то я завершил написание данного сюжета. Пожалуй, это самый сложный и затратный по силам материал за последние пол года. На разбор темы ушло целых 2 недели. И всё потому, что более простая версия Panotour 1.8 не заработала не на одном из моих компьютеров. Она ставилась, позволяла создавать туры, но при их открытии вместо красивых панорам я лицезрел чёрный экран. Причём я видел, как другие её с лёгкостью ставили и работали… В отчаянии я перепробовал разные способы установки и удаления, сменил 3 компьютера, но тщетно. Пришлось воспользоваться более новой версией программы. Работа, с которой значительно усложнялась англоязычным интерфейсом и значительной переработкой интерфейса по сравнению с предшественницей.

Однако я не зря потратил время на освоение столь недружелюбной новой версии. Дело в том, что старая позволяла адекватно выводить туры лишь в формате SWF. А, как известно почти все современные браузеры отказываются от поддержки небезопасной технологии Flash и устремляют свой взор в сторону HTML 5. Ведь она помимо плюсов безопасности может адекватно отображать контент на мобильных устройствах. Поэтому ту экскурсию, которые мы с вами сегодня создали можно с лёгкостью посмотреть на смартфоне или планшете. Причём за счёт использования акселерометра смотрится тур в разы интереснее. Полный интерактив и погружение в атмосферу. Поддержка HTML 5 это неоспоримый плюс Panotour 2 версии.

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

В общем если захотите изучить программу более подробно, то обязательно сделайте это. Создание и продажа 3D туров даже в крупных городах всё ещё остаётся довольно прибыльным бизнесом. На сегодня это всё. Друзья, вы находитесь на блоге Kurets. Ru. Если статья была полезной, то поделитесь ею с друзьями. Ну а если она полный отстой и я зря потратил 2 недели на изучение данной темы, то не скупитесь. Напишите об этом в комментариях, чтобы я больше не пилил подобную годноту. Желаю всем улётных выходных и до встречи через неделю. Как всегда. Каждую пятницу. Свежий выпуск. Не пропусти!