<
  • Главная
Статьи

Як зробити віртуальну екскурсію? Чудеса 3D технологій!

  1. Завантаження і установка Panotour Pro
  2. Підготовка графічних матеріалів
  3. Створення проекту 3D туру
  4. Навігація в віртуальному турі
  5. Додавання точок переходу
  6. Поверховий план з радаром
  7. Публікація туру на сайті

Вітаю Вітаю. Місяць тому в одному з випусків я розповідав про створення 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. Далі справа присвоюємо ім'я нашої групи.

class = "eliadunit">

class = eliadunit>

Крок 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 тижні на вивчення даної теми, то не скупіться. Напишіть про це в коментарях, щоб я більше не пиляв подібну годноту. Бажаю всім Ульотна вихідних і до зустрічі через тиждень. Як завжди. Кожну п'ятницю. Свіжий випуск. Не пропусти!

Не пропусти

class = "eliadunit">

Корисні матеріали:

Для чого і кому взагалі потрібні віртуальні екскурсії?
Так що ж нам заважає поповнити список таких організацій і попутно заробити свою копієчку?
Нехило так виходить, правда?
Адже з чого ще може починатися подорож по поверху?
Додали?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью