3 способа публикации виртуального 3D тура на сайте

Когда 3D тур готов, необходимо опубликовать его на сайте. Это можно сделать несколькими способами, рассмотрим каждый из них.

Загрузка виртуального тура на хостинг сайта

Для начала нужно загрузить все файлы 3D тура на хостинг сайта. Воспользуемся любым ftp менеджером, например, FileZilla.

Через FileZlla создадим на сервере отдельную папку «3d-tour» и загрузим в нее все необходимы файлы. Эта папка должна находиться внутри домена, только тогда мы сможем получить ссылку на 3D тур. Среди файлов виртуального тура есть html-страница, который запускает просмотр панорам.

После загрузки мы может открыть 3D тур по ссылке, ведущей к html странице воспроизведения:

https://stred.ru/panorama/kafe/shtof/tour.html

Теперь приступим к публикации полученной ссылки на сайте.

Размещение с помощью ссылки

Проще всего опубликовать 3D тур как обыкновенную ссылку. Это может быть текстовая ссылка, пункт меню или баннер.

Текстовая ссылка на виртуальный тур

<a href="https:/домен.ru/3d-tour/tour.html" target="_blank" title="Перейти к просмотру">3D тур по ресторану</a>

Виртуальный тур

<a href="https://домен.ru/3d-tour/tour.html" target="_blank" title="Перейти к просмотру"><img src="images " width="500" height="200"></a>

Раздел в меню Сайта

Создается отдельный пункт меню, который ведет на внешнюю ссылку. В нашем случае, эта ссылка открывает виртуальный тур.

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

С помощью описанных выше способов 3D панорамы открываются на отдельно станице на всё окно браузера. При необходимости, виртуальный тур можно встроить в содержимое любой страницы сайта.  Это делается тегом iframe.

Код контейнер с 3D туром выглядит следующим образом:

<iframe src="https://домен.ru/3d-tour/tour.html" width="100%" height="600"></iframe>

Размеры панорам можно настроить под собственные параметры. Теперь 3D тур отображается вместе с текстом и другим контентом:

Чтобы развернуть просмотр на весь экран, воспользуемся кнопкой «fullscreen» в меню 3D тура.

Pop-up окно с виртуальным туром

Для реализации этого метода потребуется установка на сайте дополнительного расширения, которое дает возможность создавать всплывающие окна (pop-up):

Публикация 3D тура из онлайн карт на сайте

Если 3D панорамы загружены в интернет-карты Яндекс или Google, их можно интегрировать на любой сайт. В этом случае размещение на хостинге не потребуется. Все файлы будут грузиться напрямую с ресурсов Google и Яндекс.

Для размещения нужно получить специальный код для интеграции. Он аналогичен контейнеру iframe, который мы рассмотрели ранее.

Размещение Google панорам на сайте

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

В открывшемся окне выбираем встраивание карт и жмем «копировать hml». Полученный код необходимо ставить через html редактор страницы сайта.

<iframe src="https://www.google.com/maps/embed?pb=!4v1618227045480!6m8!1m7!1sCAoSLEFGMVFpcE4ySXZZR3ZuenU2U1pOMXhyaUtoY0k2QmZlTFV5cjN0S05xNTdC!2m2!1d43.5728607227494!2d39.73268464207649!3f99.58923660656221!4f-7.96678086938816!5f0.7820865974627469" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Так 3D панорамы Google будет выглядеть на сайте:

Виртуальный тур будет стартовать именно с той точки, в которой был скопирован код.

Размещение 3D тура на сайте из Яндекс карт

В окне просмотра Яндекс панорам в правом верхнем углу расположена кнопка для публикации. Она открывает окно с настройками.

  • Ссылка на панораму – это прямая ссылка для просмотра 3D тура.
  • Виджет с картой – код для интеграции панорам на сайте. Именно он нам и нужен, кликаем по ссылке и копируем код в буфер обмена.

Остается только добавить полученный код в нужную страницу сайта.

Студия RED