Публикация проекта, созданного в Pano2VR, на вашем сайте

 Работа в Pano2VR | Фотосъемка и создание панорамных изображений, Создание VR-панорам и виртуальных туров
 29.09.2016 |  17:00 |  16.4k |  4.2/280 |  23.11.2021
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Как загрузить и опубликовать на своем сайте панораму или виртуальный тур, созданные в Pano2VR. Есть несколько способов. О них пойдет речь в этой статье.

Публикация проекта, созданного в Pano2VR, на вашем сайте

Изображение

Вступление

Вы создали виртуальный тур в Pano2VR. Дальше у вас два пути: демонстрировать тур локально в браузере на компьютере или в приложениях для мобильных устройств или разместить его на своем сайте. О первом способе я уже рассказывал здесь, а сегодня речь пойдет о публикации виртуального тура на сайте, который уже у вас имеется.

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

Что нужно знать перед публикацией контента

Выясните на каком хостинге находится ваш сайт: платном или бесплатном. Сайты на бесплатном хостинге имеют больше системных ограничений по сравнению с сайтами на платном хостинге.

Как правило ограничения касаются количества файлов в папке (в одном каталоге может быть не более 200 файлов) и по количеству уровней вложенности папок (не более 3 - 4 уровней). Это ограничение сильно влияет на функционал мультирезолюшн при экспорте HTML5, из-за чего приходится уменьшать количество уровней мультирезолюшн и вносить коррективы в шаблон структуры папок.

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

Во многих случаях необходимо, чтобы хостинг поддерживал FTP. Например, хостинги такие как Wix и Tilda не имеет такой функционал, а значит, не поддерживают массовую загрузку файлов.

Способ 1 – простая загрузка данных

Этот способ отлично подойдет тем, кто не владеет достаточными знаниями в области веб разработки (HTML / CSS / JavaScript). Суть способа заключается в загрузке на хостинг всех файлов из папки экспорта (по умолчанию – output) и открывание в браузере ссылки на html-файл из загруженной папки.

Выполните следующие шаги:

  1. Подключитесь к сайту по протоколу FTP;
  2. Создайте корневой каталог для загружаемого контента, например, vtours или panorams. Если у вас бесплатный хостинг, вроде uCoz, то каталог можно создать прямо в папке, которая отображается после подключения. Если вы создавали сайт на платном хостинге, то все данные необходимо размещать в корневой папке домена public_html;
  3. В созданной на предыдущем шаге папке создайте подпапку для загружаемого контента, например, my_first_tour;
  4. Загрузите в созданную подпапку все файлы из папки экспорта тура с сохранением структуры их расположения;
  5. Определите путь ссылки к файлу index.html, например, https://example.com/vtours/my_first_tour/index.html или https://example.com/vtours/my_first_tour/ (если файл index.html присутствует, и вы его не переименовывали), и вставьте её в адресную строку браузера.

Если вы всё сделали правильно, у вас должен открыться виртуальный тур.

Рисунок 1. Демонстрация первого способа.

Способ 2 – Встраивание html-файла на страницу сайта

Способ подходит тем, кто хочет, чтобы виртуальный тур отображался на странице сайта вместе с остальным его контентом. Данный способ заключается во встраивании html-файла на в определенную область на странице сайте при помощи html-тега iframe.

Выполните следующие шаги:

  1. Подключитесь к сайту по протоколу FTP;
  2. Создайте корневой каталог для загружаемого контента, например, vtours или panorams. Если у вас бесплатный хостинг, вроде uCoz, то каталог можно создать прямо в папке, которая отображается после подключения. Если вы создавали сайт на платном хостинге, то все данные необходимо размещать в корневой папке домена public_html;
  3. В созданной на предыдущем шаге папке создайте подпапку для загружаемого контента, например, my_first_tour;
  4. Загрузите в созданную подпапку все файлы из папки экспорта тура с сохранением структуры их расположения;
  5. Определите путь ссылки к файлу index.html, например, https://example.com/vtours/my_first_tour/index.html или https://example.com/vtours/my_first_tour/ (если файл index.html присутствует, и вы его не переименовывали);
  6. Создайте на сайте страницу и добавьте в месте, где должно появиться окно с туром следующий код:
<iframe src="https://example.com/vtours/my_first_tour/index.html" width="100%" height="500" align="center" frameborder="0">
</iframe>

Пояснения к атрибутам тега:

  • srс – путь к html-файлу, который будет загружен во фрейм, можно указать без имени домена;
  • width и height – ширина и высота фрейма, указываются в пикселях (width="800") или % (width="100%");
  • align – способ выравнивания фрейма на странице (left – по левому краю, center – по центру, right – по правому краю);
  • frameborder – отображать ли границу фрейма (0 или no – не отображать, 1 или yes – отображать).
Рисунок 2. Демонстрация второго способа.

Способ 3 – Использование кода JavaScript из файла index.html

Выполните следующие шаги:

  1. Подключитесь к сайту по протоколу FTP;
  2. Создайте корневой каталог для загружаемого контента, например, vtours или panorams. Если у вас бесплатный хостинг, вроде uCoz, то каталог можно создать прямо в папке, которая отображается после подключения. Если вы создавали сайт на платном хостинге, то все данные необходимо размещать в корневой папке домена public_html;
  3. В созданной на предыдущем шаге папке создайте подпапку для загружаемого контента, например, my_first_tour;
  4. Загрузите в созданную подпапку все файлы из папки экспорта тура с сохранением структуры их расположения. Файл index.html загружать необязательно, он больше не понадобится в папке на сервере;
  5. Откройте файл index.html в текстовом редакторе и скопируйте код между комментариями <!-- - - - - - - 8<- - - - - - cut here - - - - - 8<- - - - - - - --> и вставьте его на страницу сайта в любом месте;
  6. Откорректируйте пути к файлам скриптов pano2vr_player.js, skin.js, (webxr/three.min.js и webxr/webxr-polyfill.min.js, если такие есть), а также к файлу конфигурации .xml, добавив вначале имени полный путь, можно без имени домена.
Рисунок 3. Исходный код index.html.

Должно получиться примерно следующее:

<script type="text/javascript" src="/vtours/my_first_tour/pano2vr_player.js">
</script>
<script type="text/javascript" src="/vtours/my_first_tour/skin.js">
</script>
<script src="/vtours/my_first_tour/webxr/three.min.js"></script>
<script src="/vtours/my_first_tour/webxr/webxr-polyfill.min.js"></script>
<div id="container" style="width:100%;height:100%;overflow:hidden;">
 <br>Loading...<br><br>
</div>
<script type="text/javascript">
  // create the panorama player with the container
  pano=new pano2vrPlayer("container");
  // add the skin object
  skin=new pano2vrSkin(pano);
  // load the configuration
  window.addEventListener("load", function() {
    pano.readConfigUrlAsync("/vtours/my_first_tour/config.xml");
  });
</script>
<noscript>
 <p><b>Please enable Javascript!</b></p>
</noscript>

При желании этот способ можно оптимизировать, используя следующие варианты:

  1. Вынести div-элемент container в отдельное место в шаблоне страницы сайта. Тогда его не придется объявлять в содержимом страницы;
  2. Разместить скрипты pano2vr_player.js, skin.js, webxr/three.min.js и webxr/webxr-polyfill.min.js в одном месте и подключить их в шаблоне страницы сайта. Тогда их не понадобится подключать при создании новых страниц, то есть несколько строчек из кода выше можно исключить. Может понадобиться указание базового пути к папке тура в вызовах функций pano2vrPlayer() и pano2vrSkin(). Вот так:
<script type="text/javascript">
  // create the panorama player with the container
  pano=new pano2vrPlayer("container", "/vtours/my_first_tour/");
  // add the skin object
  skin=new pano2vrSkin(pano, "/vtours/my_first_tour/");
  // load the configuration
  window.addEventListener("load", function() {
    pano.readConfigUrlAsync("/vtours/my_first_tour/config.xml");
  });
</script>

Есть, конечно и более продвинутые способы, которые использую я, например, вынос JavaScript-кода в отдельный js-файл. Однако я думаю, что это будет слишком сложно для вас и трех способов будет достаточно.

Способ 4 – для CMS Wordpress, Joomla и Drupal

Если вашем сайте установлена система управления контентом Wordpress, Joomla и Drupal, то вы можете воспользоваться специальными плагинами для этих систем от Garden Gnome Software.

Экспорт виртуального тура необходимо будет производить в пакет GGPKG (третья кнопка, с иконкой коробки), который потом будет загружаться на сайт.

Рисунок 4. Вкладка настроек экспорта.

Добавление контента на сайт будет осуществляться через виджет в Elementor.

Скачать плагины можно по ссылкам:

Я хоть и имею один сайт с CMS Joomla, на котором публикую виртуальные туры, но не пользуюсь плагином. Вместо этого использую собственную методику встраивания.

Теги:  сайт, хостинг, Joomla, wordpress, Pano2VR6, загрузка на сайт, Публикация, Pano2VR, Плагин, Drupal, HTML5, Панорама
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Оцените материал
Поделитесь материалом в социальных сетях
Материалы по теме статьи

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

Если этот материал совсем не то, куда Вас привел поисковик, попробуйте выполнить поиск по сайту или введите запрос в строку ниже. Также Вы можете посмотреть другие материалы в разделе статьи.

Нет комментариев
Сейчас просматривают
Связь со мной и соцсети
Telegram
Viber
LinkedIn
ВКонтакте
 
Одноклассники
 
Instagram
 
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 40
Онлайн всего: 5
Гостей: 5
Пользователей: 0