Как разместить панораму 360° на сайте

Как сделать и разместить панораму 360° на сайте

Панорама 360° — это интерактивное фотоизображение, позволяющее показать окружающее пространство вокруг точки съемки со всех сторон.

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

Панораму можно сделать с помощью:

  • Специальной камеры 360° — получившееся изображение нужно загрузить на специальный платный или бесплатный хостинг.

  • Смартфона — панораму нужно сделать в приложении «Просмотр улиц» от Google и публикуется бесплатно.

Рассмотрим, как каждый из вариантов подробнее:

Сделать панораму с помощью камеры 360°

Вы можете использовать любую камеру для панорамной съемки, например, Ricoh Theta V.

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

После съемки полученные кадры склеиваются в специальных приложениях:

  • PTGui;

  • AutoPano Giga;

  • Adobe Photoshop;

  • Hugin и др.

Затем полученный файл нужно сохранить в формате изображения или видео и опубликовать на платном хостинге (Pano2VR, KrPano, 360cities) или частично платном (Truevirtualtours.com).

Сервис Truevirtualtours позволяет размещать панорамы размером до 5 Мб бесплатно. С ценами на загрузку больших изображений и видео вы можете ознакомиться здесь.

  • Зарегистрируйтесь на сайте Truevirtualtours.com.

  • Нажмите на кнопку «Загрузить панораму» в правом верхнем углу.

  • Нажмите на кнопку «Загрузить панораму / видео» и выберете файл для загрузки.

  • Ваша панорама загружена на хостинг. Теперь под панорамой нажмите на кнопку «Изменить» и в открывшемся окне в разделе «Статус» выберете пункт «Опубликована». Сохраните изменения.

  • Нажмите на вашу панораму. В новой вкладке нажмите на троеточие, выберете пункт «Встроить / Поделиться». Скопируйте HTML код.

  • Перейдите в панель управления Wfolio на страницу для редактирования. Нажмите на «+» для добавления нового блока.

  • Перейдите в раздел «Виджеты», пролистайте страницу до конца и выберите любой блок HTML.

  • Вставьте скопированный HTML код в блок. Сохраните изменения.

Для того, чтобы панорама растягивалась на весь экран поменяйте значение «width=640» на значение «width=100%».

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

Сделать панораму с помощью смартфона

Для того, чтобы сделать панораму с смартфона, вам нужно скачать приложение «Просмотр улиц» от Google в App Store или Play Market.

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

Как сделать и загрузить панораму на сайт:

  • Скачайте приложение «Просмотр улиц».

  • После скачивания откройте приложение и нажмите на оранжевую иконку фотоаппарата в нижнем правом углу экрана. Выберете пункт «Создать панораму 360°».

  • Сделайте несколько фотографий вокруг себя, внизу и сверху. Затем нажмите на кнопку «Опубликовать».

  • После одобрения публикации скопируйте ссылку на панораму со своего смартфона и вставьте в браузер компьютера.

  • Нажмите на троеточие возле вашего имени и выберете пункт «Поделитесь с друзьями или получите код изображения».

  • Перейдите в раздел «Встраивание карт» и нажмите на кнопку «Копировать HTML».

  • Перейдите в панель управления Wfolio на страницу для редактирования. Нажмите на «+» для добавления нового блока.

  • Перейдите в раздел «Виджеты», пролистайте страницу до конца и выберите любой блок HTML.

  • Вставьте скопированный HTML код в блок. Сохраните изменения.

Для того, чтобы панорама растягивалась на весь экран поменяйте значение «width=640» на значение «width=100%».

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