Как сделать 3д тур для сайта: Создание виртуальных туров 360 — пошаговое руководство для заказчиков — Блог фотографа

Как опубликовать 3D тур на свой сайт — Блог фотографа

• Евгений Галанин
• 08 апреля 2020
• 3D тур, виртуальный тур

В этой статье вы узнаете, как правильно опубликовать виртуальный тур, созданный на движке KRPano на ваш сайт и избежать основных ошибок.

Содержание

1. 3D туры, созданные в редакторе KRPano и в PanoTour
2. Создание директории на хостинг
3. Публикация исполняемых файлов тура на движке KRPano
4. Варианты публикации 3D тура на сайт
   • Тур открывается в новой вкладке
   • Тур открывается во всплывающем окне
   • Тур встраивается в контент страницы
5. HTML-код для публикации тура внутри страницы
6. HTML-код для встраивания тура в Taplink
7. Основные ошибки при публикации виртуального тура
8. Заключение

В этой статье речь пойдет только о 3D турах, созданных на движке KRPano, который используется в двух самых популярных редакторах:

• KRPano
• Panotour (на настоящий момент разработка и поддержка редактора прекращена)

На вашем хостинге создаете директорию — это URL-адрес, ссылка по которой будет открываться ваш 3d тур.

Например:

http://доменвашегосайта.ru/tour/tour.html

Стандартный проект 3D тура на движке KRPano создается на основе HTML5 и выглядит как папка с файлами и исполняемый файл “tour.html” или “index.html”.

Все эти файлы публикуете на хостинг по нужному адресу, в нашем примере это:

http://доменвашегосайта.ru/tour/tour.html

Разместить тур на сайте можно разными способами, ниже я опишу самые логичные, простые и удобные для пользователя.

Способ 1: Тур открывается в новой вкладке на весь экран

В этом случае создается прямая гипер-ссылка на проект тура. Она обычно размещается либо в тексте страницы, либо в главном меню сайта. Тур при этом открывается на весь экран в новом окне браузера.

 

Способ 2: Всплывающее окно

Ссылка размещается аналогичным образом также как и для новой вкладки, но тур при этом открывается всплывающим (PopUp) окном часто с заданным изначально фиксированным соотношением сторон.  

Способ 3: Тур размещается “окном” внутри контента страницы

В этом случае до или после блока с туром может располагаться другая текстовая или графическая информация. 
При вставке проекта внутри страницы желательно оформить его отдельным заголовком и описанием.

 

Для этого вам требуется добавить в html-код страницы код iframe

 

<iframe seamless
width="900"
src="https://доменвашегосайта.ru/tour/tour.html">
</iframe>

 

Где 900 — это длина, а 480 — ширина встраиваемого окна. В этом окне и будет отображаться ваш 3D тур.

Аналогично вы можете встроить виртуальный 3D тур в Taplink, но для этого вам потребуется разместить его на сайте с активным ssl-сертификатом.

<iframe src="https://доменвашегосайта.ru/tour/tour.html" allowfullscreen></iframe>

Справка по работе с HTML в Taplink.

Тур открывается в активном окне на весь экран

Довольно часто при размещении гипер-ссылки на 3D тур забывают указать параметр target=»_blank», который отвечает за открытие ссылки в новом окне, в результате чего он открывается в активной вкладке.  

Неверно — гипер-ссылка откроется в активной вкладке:

<a href="http://доменвашегосайта.ru/tour/tour.html">видимый текст ссылки</a>

Верно — гипер-ссылка откроется в новой вкладке: 

<a href="http://доменвашегосайта.ru/tour/tour.html" target="_blank">видимый текст ссылки</a> 

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

Некорректное сокращение ссылки на тур

Исполняемый файл тура обычно имеет следующие имена:

• index.html
• tour.html

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

http://доменвашегосайта. ru/tour/index.html
http://доменвашегосайта.ru/tour/

Во-втором случае ссылка на тур должна быть указана в полном размере: 

http://доменвашегосайта.ru/tour/tour.html 

Самостоятельное изменение исполняемого файла

Не редко программист заказчика пытается самостоятельно отредактировать исходные файлы тура или использовать код из исполняемого файла внутри страницы сайта отдельно от исполняемого файла.

В 90% в следствие этих манипуляций тур перестает полностью или частично. Не делайте так

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

Как выложить готовый 3D тур на сайт

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

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

Начнем с того, что присланные вам файлы необходимо разместить на вашем хостинге. В коневом каталоге файлов 3D тура имеется html-файл и папка, содержащая элементы тура, на которую и ссылается html-файл. Данный html-файл является ключевым, и именно его адрес необходимо будет указывать при размещении тура на сайте. В качестве примера рассмотрим файлы существующей панорамы набережной у Авроры http://fotogid.info/tour/avrora

NB! Если вы загружаете на свой хостинг заархивированные файлы 3D тура, пожалуйста, убедитесь, что вы их распаковали.

 

Вариант 1

Одним из простейших вариантов вставки тура на выбранную страницу – разместить подготовленную статическую картинку из тура и привязать к ней гиперссылку на указанный html-файл. После клика на данную картинку в окне откроется 3D тур.

NB! Рекомендуется на такую картинку дополнительно наложить иконку «play» или надпись «3D тур», подсказав посетителю вашего сайта, что появится анимация после клика на данную картинку.

Пример реализации

 

Вариант 2

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

Пример реализации

Виртуальная 3D панорама набережной у стоянки Крейсера «Аврора»

 

Вариант 3

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

Если же такой кнопки нет, то можно воспользоваться кодом вставки. Для этого необходимо ваш встроенный редактор перевести из режима «Full HTML» в режим «Plain text», и в нужном месте страницы вставить код: <iframe src=»http://fotogid.info/sites/default/files/3d_tours/Aurora_new/Aurora_new.html» border=»0″ frameborder=»0″></iframe>

В данном коде http://fotogid.info/sites/default/files/3d_tours/Aurora_new/Aurora_new.html — адрес ключевого файла 3D тура,
а цифры параметров width= и height= – это ширина и высота окна, в котором будет демонстрироваться 3D тур (параметры указывается в пикселях). В примере это 1140 и 750, как наиболее подходящие именно для данного сайта. Но если вам нужен другой размер, то вы можете указать нужные вам параметры, к примеру, 640 и 480.

 

Пример реализации

 

 

 

Создайте виртуальный тур на своем веб-сайте с помощью этой техники

Поскольку мир страдает от пандемии Covid-19, многие потеряли возможность осуществить свои планы на отпуск этим летом. Как энтузиаст путешествий, я не совсем потерялся и смог провести время с семьей, посещая места, которые у меня никогда не было возможности увидеть раньше, через Google Street View и пару сайтов виртуальных туров. Впервые музей Лувр предоставил возможность виртуально посетить свое изысканное сокровище произведений искусства, которое, я уверен, удалось бы увидеть лишь немногим людям, даже если бы эта пандемия не захлестнула мир. В этой статье будет представлен обзор основ виртуальных туров и показано, как создать виртуальный тур для собственного веб-сайта.

Что такое виртуальный тур?

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

Хороший виртуальный тур даст вам хорошее представление об атмосфере этого места. Ознакомьтесь с этой статьей Forbes и наслаждайтесь посещением 15 лучших виртуальных туров по всему миру.

Как совершить виртуальный тур?

Для создания виртуального тура на вашем веб-сайте вам понадобится камера, штатив, устройство для сшивания изображений и программное обеспечение для создания виртуального тура. Вам также нужно будет сделать 360-градусное изображение, сфотографировав область вокруг вас с помощью штатива и камеры, соединив их все вместе в одно панорамное изображение, а затем поместив его в приложение для создания туров. После добавления ваших горячих точек (среди прочего) вам нужно будет построить вывод. Чтобы сделать хорошее панорамное изображение, нужно разбираться в проекциях. Представьте, что вы хотите спроецировать сферу на прямоугольник. Есть несколько способов сделать это. Картографы уже знакомы с концепциями проекций, потому что им приходится рисовать карту сферы на поверхности.

Изображение с gisgeography,com

Дополнительную информацию о различных проекциях можно найти здесь.

Сначала мы собираемся использовать сшиватель изображений для создания панорамного изображения. Существует множество программ для сшивания изображений. Одним из лучших бесплатных сшивателей изображений является «Image Composite Editor» от Microsoft. Поскольку он доступен только для Windows, если вы используете Mac, вы можете попробовать другое программное обеспечение здесь.

Итак, мы начнем с установки приложения Image Composite Editor отсюда. После установки нажмите кнопку «Новая панорама» вверху.

Создание новой панорамы с помощью Microsoft Image Composite Editor

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

После выбора всех изображений нажмите кнопку «Далее».

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

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

Выравнивание и компоновка изображений

Если вы согласны с результатами, нажмите кнопку «Далее». Но убедитесь, что размер изображения составляет 360 × 180 градусов, иначе у вас будут проблемы с некоторыми зрителями виртуального тура.

Просмотрите необработанное изображение и установите горизонт.

Здесь вы можете изменить размер объединенного изображения и обрезать его по своему усмотрению. Если вас это устраивает, нажмите кнопку «Далее».

Изменение размера и обрезка окончательного панорамного изображения

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

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

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

Теперь пришло время создать виртуальный тур с помощью приложения Pano2VR. Загрузите и установите его отсюда. После установки щелкните правой кнопкой мыши на панели браузера Tour и импортируйте панорамные изображения.

Импорт панорамных изображений в приложение Garden Gnome Pano2VR

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

Добавьте точку доступа и разрешите пользователям переходить к следующей панораме, щелкнув эту точку.

Теперь щелкните значок вывода и добавьте вывод HTML5 на правую панель.

Добавьте тип вывода и настройки.

Установите правильные параметры вывода, щелкните значок шестеренки и дождитесь завершения.

Создайте вывод и дождитесь его завершения.

После завершения процесса вы найдете выходную папку, подобную этой. Вам понадобятся все файлы и папки здесь.

Результат вывода. Тур готов.

На следующем этапе мы собираемся встроить этот тур на веб-сайт WordPress.

Как показать это на моем сайте?

Чтобы встроить тур на свой веб-сайт, вам необходимо сначала загрузить все выходные файлы. Просто сначала сделайте из него zip-пакет.

Заархивируйте все файлы и папки тура.

Используя подключаемый модуль файлового менеджера, создайте папку по адресу wp-content/uploads/ с именем « vt », чтобы лучше организовать тур.

Создайте папку с именем «vt» в папке загрузки.

Теперь загрузите zip-файл в этот каталог.

Загрузите zip-файл в каталог vt.

Щелкните правой кнопкой мыши ZIP-файл и извлеките его сюда.

Извлеките пакет тура

Вы можете удалить zip-файл. Теперь вам нужно встроить файл index.html на свою страницу с помощью iframe.

Файл тура index.html

Поскольку для создания этого примера я использовал локальный компьютер, URL-адрес файла тура будет таким:

http://localhost/jupiter/wp-content/uploads/VT/index .html

Теперь вы можете встроить этот URL на свою страницу. Просто создайте страницу.

Добавить новую страницу, чтобы встроить в нее тур.

Используя Gutenberg, добавьте пользовательский блок HTML.

Используйте блок Custom HTML для встраивания тура

Поместите этот код iFrame в блок кода:

Вы можете использовать тот же метод, чтобы добавить тур в тур Elementor. При редактировании страницы через Elementor добавьте виджет Custom HTML на свою страницу и поместите на него тот же код.

Результаты будут такими:

Final Words

Совет: В качестве альтернативы вы можете использовать такие инструменты, как WP VR, для создания виртуальных туров на веб-сайте WordPress.

В этом посте мы узнали, как создать и встроить виртуальный тур на веб-сайт WordPress. Тем не менее, есть десятки различных способов сделать это. Но упомянутый выше метод означает, что вы не будете ограничены или ограничены в построении виртуального тура. Хотя стоит отметить, что у других плагинов может быть меньше шагов для встраивания панорам в WordPress. Однако у них есть свои ограничения, и вам может потребоваться найти способ обойти эти ограничения. Этот метод может работать и на любом другом веб-сайте, не обязательно на веб-сайте WordPress.

подписка

Подпишитесь на блог тем Artbees, чтобы получать лучшие советы и идеи по WordPress.

5 лучших веб-сайтов для создания виртуальных туров

Если вы ищете инструменты виртуальной реальности для демонстрации своего пространства, существует множество веб-сайтов на выбор.

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

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

Если вы ищете простой способ создать виртуальный тур, это отличное место для начала. Kuula позволяет вам испытать свое пространство. Вместо скучного слайд-шоу Kuula поможет вам создать 360-градусный тур.

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

Kuula предлагает бесплатный план, по которому вы можете делиться до 100 загрузок в месяц. Если вам понадобятся неограниченные загрузки или расширенные функции, вы можете выбрать план Pro за 16 долларов в месяц.

Связанный: Виртуальные туры на открытом воздухе, чтобы вернуться к природе с походами, погружениями и спелеологией

Matterport — одна из крупнейших 3D-платформ для виртуальных туров. Этот инструмент может использоваться кем угодно, независимо от того, хотите ли вы поделиться своим пространством с друзьями и семьей или создать тур по своей профессиональной собственности. Этот инструмент не только захватывает 360-градусный обзор, он фиксирует глубину вашего пространства, комбинируя 360-градусный обзор с 3D-данными.

Matterport может помочь вам профессионально захватить ваше пространство с помощью специалиста по 3D-захвату, начиная с 129 долларов США. Но для создания виртуального тура вам не нужно использовать опытного специалиста. Вы также можете сделать это самостоятельно, используя свой iPhone.

Matterport предлагает бесплатный план, начальный план за 9,99 долларов в месяц и план Pro за 69 долларов в месяц.

С Metareal Stage вы можете использовать 360-градусные изображения для создания своего виртуального тура. Metareal Stage позволяет создавать не только 3D-тур, но и создавать 3D-модель и представление модели.

Уникальной функцией Metareal Stage является функция «Build It For Me», которая в основном делает всю работу за вас. Все, что вам нужно сделать, это загрузить свои панорамные снимки, и ваш виртуальный тур создан. Эта функция стоит 4 доллара за панораму.

Metareal Stage хорошо работает с камерой 360, DSLR или, если у вас есть ротатор, вы можете использовать камеру телефона. Вы можете создавать свои виртуальные туры бесплатно. Однако, если вам нужны дополнительные функции, вы будете платить от 9,95 до 39 долларов в месяц.

Хотя CloudPano используется несколькими брендами в разных отраслях, он не ограничивается маркетологами и владельцами бизнеса. CloudPano — это простое в использовании программное обеспечение для виртуального тура 360, которое может использовать каждый.

Чтобы использовать этот инструмент, вам просто нужно зарегистрировать учетную запись. Вы можете загружать неограниченное количество 360 фотографий в рамках бесплатного плана. Однако срок действия ваших туров истекает через 120 дней. Если вы используете этот инструмент для своего бизнеса и вам нужны дополнительные функции, вы можете заплатить 10 долларов за тур или выбрать план Pro Plus за 33 доллара в месяц.

Если вы хотите создавать воздушные виртуальные туры для больших пространств, таких как поле для гольфа, Roundme — это инструмент для вас.

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

Roundme предлагает бесплатную учетную запись до 15 загрузок в неделю. Если вам нужен доступ к неограниченному количеству загрузок, учетная запись Pro стоит 8,25 долларов в месяц.

Связано: Лучшие бесплатные виртуальные путешествия, которые стоит попробовать

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

Все вышеперечисленные веб-сайты замечательны и, несомненно, помогут вам создать виртуальные туры. Но виртуальные туры полезны не только для демонстрации вашего пространства.

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