В этой статье вы узнаете, как сделать 360° панорама-тур из ваших рендеров полностью бесплатно. 
Нам не нужно будет платить за какой-либо сервис, хостинг, домен или регистрацию. 

Также, не будет никакой рекламы в интерфейсе или логотипов. 
Просматривать тур можно будет в веб-браузере, естественно будет адаптация под Desktop и Mobile.

В качестве хостинга будем использовать GitHub - супер стабильное решение с Uptime 99.99%.
А для создания тура – простейший онлайн сервис Marzipano.

По ссылке ниже вы можете посмотреть результат, который получится у вас.

Loading...

Перед тем как начать, у вас должны быть подготовлены 360° рендеры панорам. Для хорошей картинки необходимы сферические панорамы размерами минимум  8k, формата JPG или PNG.

Loading...

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

Рендер панорам происходил при помощи Corona Renderer 7 с новой Corona Camera, в настройках которой указан тип Spherical 360°.

Loading...

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

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

Переходим по адресу.

Loading...

Нажимаем Sign Up, следуем инструкциям, здесь нет ничего сложного…

Loading...

На все последующие шаги нажимаем Continue и в конце обязательно Continue for free. Готово!

Loading...

На этой странице сразу же создадим репозиторий, нажав Create repository, введите название, например SVOYA-360 и обязательно включите переключатель на Public, для того чтобы любой пользователь имел доступ к репозиторию.

Loading...

Loading...

Нажмите Set up in Desktop. Если вы это делаете первый раз, вас попросит скачать программу GitHub Desktop Setup-x64.exe. Скачиваем, устанавливаем, логинимся…

Еще раз нажимаем Set up in Desktop в браузере, теперь у вас должно открыться окно с клонированием репозитория.

Loading...

Указываем удобный Local path, затем нажимаем Clone.

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

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

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

Loading...

Затем, нажмите просто Commit file.

Loading...

Перейдите в раздел Settings.

Loading...

Перейдите в раздел Pages и выберите Branch: main.

Loading...

Нажмите Save.

Loading...

Через минуту обновите страницу, у вас должна появиться такая надпись, как показано ниже.

Loading...

Нажмите Visit Site, это и будет адрес нашего панорама-тура. Пока отображать нечего, но мы уже имеем бесплатный хостинг и адрес в Интернет.

Loading...

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

Перейдите по адресу.

Нажмите Start и загрузите ваши панорамы.

Loading...

Loading...

Как видите интерфейс сервиса очень простой. Слева находятся важные настройки. Справа внизу, кнопки для создания тура.

Отсортируйте себе список Panorama List. Соответственно первая панорама будет загружаться при старте.

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

Произведем настройки проекта и изменим Project Title слева вверху. Я оставляю все настройки по-умолчанию, за исключением Autorotate, его всегда выключаю.

Loading...

Для создания переходов между панорамами, нажмите Link Hotspot, справа внизу.

Loading...

Затем из списка выберите необходимую панораму. Закройте список и разместите Hotspot на экране. Сразу же размещаю еще один Hotspot для Kitchen Area.

Loading...

Нажимайте кнопку Set initial view, для того чтобы камере вид по-умолчанию. Один вид настроили, идем дальше. Нажмите иконку перехода.

Loading...

Разверните камеру и проделайте те же шаги: установите Set initial view, добавьте Hotspots на другие панорамы.

Loading...

И так нужно установить Hotspots для каждой панорамы.

Рекомендация!
Устанавливайте вид по-умолчанию строго горизонтально прямо, не заламывайте углы камеры вверх или вниз. Вы можете включить Autorotate, чтобы камера приняла горизонтальный вид, затем отключить эту опцию.

Еще раз убедитесь, что вы правильно поставили все Hotspots при помощи иконки перехода. Если все работает корректно, экспортируем наш проект.

Loading...

Loading...

В результате мы получаем архив со всеми файлами для собственного размещения панорамы в Интернет.

Откройте архив с помощью архиватора. Вы увидите такую структуру файлов.

Loading...

Извлеките все файлы из папки app-files в проект GitHub на вашем компьютере. У вас должно получиться вот так.

Loading...

Отлично! Открываем программу GitHub Desktop, видим следующее.

Loading...

Напишите название Commit, затем нажмите Commit to main.

Loading...

Процесс подготовки файлов пошёл… Подождите пару минут и затем нажмите Push origin.

Loading...

Отлично! Панорама заработала!

Loading...

Мне дизайн показался не современным и я решил это исправить. Скачайте архив по ссылке ниже.

Это моя доработка дизайна, где я отредактировал оригинальный код. И теперь достаточно извлечь файлы из архива и заменить их в вашем проекте.

Loading...

После замены файлов, создайте Commit в GitHub Desktop.

Loading...

Затем нажмите Push origin. Через несколько минут обновите страницу панорама-тура. 

Внимание!
В некоторых случаях нужно подождать от 15 до 30 минут, пока обновится кеш GitHub. Наберитесь терпения, если ваш проект работает не сразу!

Loading...

Вот такой финальный результат.

Loading...

По моему мнению, такой способ предоставление панорам ничем не хуже, чем платные аналогичные сервисы. Самое главное, что панорама доступна 24/7 со стабильным соединением, алгоритмы Marzipano быстро отображают панорамы в браузере, поскольку загрузка картинок осуществляется только под конкретный вид камеры. Интерфейс приятный, минималистичный, без рекламы и логотипов. И при этом всём, мы не потратили ни копейки.

Loading...

Надеюсь статья вам понравилась, пишите комментарии или у вас получилось...

Для бонусного дизайна доработан внешний вид Infopoints, кнопку Fullscreen и Scrollbar для списка панорам.

Большое спасибо пользователю Andrew Chwalik за идею и помощь в доработке дизайна.

Здесь будут прикреплены панорамы, пользователей, которые воспользовались данным способом. Хотите чтобы ваша панорама попала в статью? Пришлите ее в комментариях!