Безкоштовний сервіс та хостинг для 360 панорама-турів (Marzipano + GitHub)
Вступ
У цій статті ви дізнаєтесь, як зробити 360° панорама-тур із ваших рендерів повністю безкоштовно.
Нам не потрібно буде платити за будь-який сервіс, хостинг, домен чи реєстрацію.
Також, не буде ніякої реклами в інтерфейсі чи логотипів.
Переглядати тур можна буде у веб-браузері, звісно буде адаптація під Desktop та Mobile.
Як хостинг будемо використовувати GitHub - супер стабільне рішення з Uptime 99.99%. А для створення туру - найпростіший онлайн сервіс Marzipano.
За посиланням нижче ви можете подивитись результат, який вийде у вас.
Початок
Перед тим як почати, у вас повинні бути підготовлені 360° рендери панорам. Для гарної картинки необхідні сферичні панорами розмірами мінімум 8k, формату JPG або PNG.
Як приклад я зробив панорами інтер'єру SVOYA, до речі, минулий урок присвячений інтерактивній візуалізації на WebGL. Цей урок ви можете знайти за посиланням нижче.
SVOYA Interactive WebGL VisualizationРендер панорам відбувався за допомогою Corona Renderer 7 з новою Corona Camera, в налаштуваннях якої зазначено тип Spherical 360.
Розбираємось з GitHub
GitHub – це система управління проектами та версіями коду, а також платформа соціальних мереж, створена для розробників. Це дозволяє працювати разом з іншими людьми по всьому світу, планувати свої проекти і відстежувати свою роботу. У нашому випадку - це відмінний безкоштовний хостинг файлів.
Реєстрація
Давайте насамперед зареєструємося на GitHub. Якщо у вас вже є обліковий запис на GitHub, ви можете пропустити цей крок.
Переходимо на адресу.
https://github.com/
Натискаємо Sign Up, дотримуємося інструкцій, тут немає нічого складного…
На всі наступні кроки натискаємо Continue і наприкінці обов'язково Continue for free. Готово!
На цій сторінці відразу ж створимо репозиторій, натиснувши Create repository, введіть назву, наприклад SVOYA-360 і обов'язково увімкніть перемикач на Public, щоб будь-який користувач мав доступ до репозиторію.
Встановлення GitHub Desktop
Натисніть Set up in Desktop. Якщо ви це робите вперше, вас попросить завантажити програму GitHub Desktop Setup-x64.exe. Завантажуємо, встановлюємо, логінимся ...
Ще раз натискаємо Set up in Desktop у браузері, тепер у вас має відкритися вікно з клонуванням репозиторію.
Вказуємо зручний Local path, потім натискаємо Clone.
Ця програма необхідна для зручного заливання файлів у Інтернет. Теоретично можна заливати файли і через веб-інтерфейс GitHub, але з програмою зручніше, оскільки немає обмеження на кількість файлів, що заливаються.
Зараз ми зробили зв'язку вашої локальної папки проекту та GitHub. Пізніше ми додамо до цієї папки файли панорама-туру і зможемо зручно завантажувати їх у веб.
Налаштування репозиторію
І ще один важливий нюанс, потрібно зробити деякі налаштування вашого репозиторію.
Натисніть README, щоб створити перший файл та ініціалізувати створення гілки main.
Потім, натисніть просто Commit file.
Перейдіть до розділу Settings.
Перейдіть до Pages і виберіть Branch: main.
Натисніть Save.
Через хвилину оновіть сторінку, у вас має з'явитися такий напис, як показано нижче.
Натисніть Visit Site, це буде адреса нашого панорама-туру. Поки що відображати нічого, але ми вже маємо безкоштовний хостинг та адресу в Інтернеті.
Примітка!
Як бачите у назві бере участь ваше ім'я, вказане під час реєстрації. Тому для більш красивої адреси, намагайтеся вибирати цікавіше ім'я, наприклад назву вашої компанії.
Створення панорама туру
Перейдіть на адресу.
https://www.marzipano.net/tool/Натисніть Start і завантажте панорами.
Як бачите інтерфейс сервісу дуже простий. Зліва знаходяться важливі налаштування. Праворуч унизу, кнопки для створення туру.
Відсортуйте список Panorama List . Відповідно перша панорама завантажуватиметься при старті.
Примітка!
У Marzipano є одна цікава особливість, всі зміни відбуваються на льоту у браузері. Ви не можете зберегти проміжний варіант. Тому не закривайте сторінку браузера, доки не будете повністю впевнені, що проект готовий.
Зробимо налаштування проекту та змінимо Project Title зліва вгорі. Я залишаю всі налаштування за замовчуванням, за винятком Autorotate, його завжди вимикаю.
Щоб створити переходи між панорамами, натисніть Link Hotspot, праворуч внизу.
Потім у списку виберіть необхідну панораму. Закрийте список та розмістіть Hotspot на екрані. Відразу ж розміщую ще один Hotspot для Kitchen Area.
Натисніть кнопку Set initial view, щоб камері вигляд за промовчанням. Один вид налаштували, ідемо далі. Натисніть на іконку переходу.
Розгорніть камеру і зробіть ті самі кроки: встановіть Set initial view , додайте Hotspots на інші панорами.
І так потрібно встановити Hotspots для кожної панорами.
Рекомендація!
Встановлюйте вигляд за умовчанням строго горизонтально прямо, не заламуйте кути камери вгору або вниз. Ви можете включити Autorotate, щоб камера набула горизонтального вигляду, потім відключити цю опцію.
Вкотре переконайтеся, що ви правильно поставили все Hotspots за допомогою іконки переходу. Якщо все працює коректно, то експортуємо наш проект.
В результаті ми отримуємо архів з усіма файлами для розміщення панорами в Інтернет.
Публікація 360° панорама туру до Інтернету (GitHub)
Відкрийте архів за допомогою архіватора. Ви побачите таку структуру файлів.
Вийміть усі файли з папки app-files у проект GitHub на вашому комп'ютері. У вас має вийти ось так.
Чудово! Відкриваємо програму GitHub Desktop, бачимо таке.
Напишіть назву Commit, а потім натисніть Commit to main.
Процес підготовки файлів пішов… Зачекайте кілька хвилин і натисніть Push origin.
Чудово! Панорама запрацювала!
Бонус (Дизайн)
Мені дизайн здався не сучасним, і я вирішив це виправити. Завантажте архів за посиланням нижче.
Чорний дизайн для MarzipanoЦе моє доопрацювання дизайну, де я відредагував оригінальний код. І тепер достатньо вийняти файли з архіву та замінити їх у вашому проекті.
Після заміни файлів, створіть Commit у GitHub Desktop.
Потім натисніть Push origin. За кілька хвилин оновіть сторінку панорама-туру.
Увага!
У деяких випадках потрібно почекати від 15 до 30 хвилин, поки оновиться кеш GitHub. Наберіться терпіння, якщо ваш проект працює не одразу!
Ось такий фінальний результат.
Висновок
На мою думку, такий спосіб надання панорам нічим не гірший за платні аналогічні сервіси. Найголовніше, що панорама доступна 24/7 зі стабільним з'єднанням, алгоритми Marzipano швидко відображають панорами у браузері, оскільки завантаження картинок здійснюється лише під конкретний вид камери. Інтерфейс приємний, мінімалістичний, без реклами та логотипів. І при цьому всім, ми не витратили жодної копійки.
Сподіваюся, стаття вам сподобалася, пишіть коментарі або у вас вийшло...
https://360-pano-tour.github.io/SVOYA-360/Оновлення
Для бонусного дизайну доопрацьовано зовнішній вигляд Infopoints, кнопку Fullscreen і Scrollbar для списку панорам.
Велике спасибі користувачеві Andrew Chwalik за ідею та допомогу у доопрацюванні дизайну.
Панорами від користувачів
Тут буде прикріплено панорами, користувачів, які скористалися даним способом. Бажаєте щоб ваша панорама потрапила до статті? Надішліть її в коментарях!
Elm Street Tour by Andrew ChwalikFAQ
1. Про що ця стаття?
2. Що таке Marzipano?
3. Що таке GitHub Pages?
4. Чому Marzipano популярний серед 3D-художників?
5. Чи можна використовувати Marzipano безкоштовно?
6. Чи потрібен власний сервер для розміщення панорам?
7. Які типи контенту можна публікувати через Marzipano?
8. Чи підтримуються мобільні пристрої?
9. Чи можна додавати переходи між кімнатами?
10. Чи можна додавати власний дизайн інтерфейсу?
11. Чи підходить GitHub Pages для комерційних демонстрацій?
12. Чи можна використовувати власний домен?
13. Чи потрібні навички програмування?
14. Чому безкоштовні рішення популярні серед візуалізаторів?
15. Чи можна використовувати Marzipano для архітектурної візуалізації?
16. Для кого буде корисна ця стаття?
Останні статті
{{comment.text}}