3Dindex.ru

КАК РАЗМЕСТИТЬ 3D ФОТО НА САЙТ, ПОШАГОВАЯ ИНСТРУКЦИЯ

3D фото с обзором 360 градусов представляет собой серию фотографий объединенных в один обзор, который с помощью специальной программы (проигрывателя) превращается в движущееся изображение.

Обычно,  после  выполнения 3D съемки, все полученные файлы передаются своему вебмастеру, который легко разместит 3D фото на сайт. Но, если вы владеете навыками работы в системе управления сайтом, то можете легко сделать это сами.

Для размещения фото на 360 градусов на сайт необходимо сделать всего 2 шага:

ШАГ 1. ЗАГРУЗКА КОНТЕНТА НА ХОСТИНГ

Если говорить о предметных 3D фото 360º, созданных в нашей студии с использованием автоматизированной системы, то после 3D съемки вы получите архив с папками, например

Каждый такая папка имеет внутреннюю структуру из папок и файл с именем «HTML5Viewer.html». Это ключевой файл, который используется для создания ссылки на 3D фото. Имя ключевого файла в других случаях может отличаться, но расширение файла всегда будет «html».

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

Примечание. В папке Imagas расположены фото с изображением изделий, которые используются для демонстрации 3D фото.

ШАГ 2. РАЗМЕЩЕНИЕ 3D ФОТО 360º НА СТРАНИЦУ САЙТА

В зависимости от желаемого результата существует два основных способа интеграции 3D фото 360 градусов на сайт:

  • Создание ссылки для демонстрации 3Д фото в новой вкладке
  • Демонстрация 3Д фото в маленьком окне на странице сайта

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

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

Первый способ интеграции 3Д фото имеет несколько вариантов. Рассмотрим эти  варианты создания ссылки для запуска фото 360 градусов в новой вкладке на примере системы управления сайтом в WordPress.

Вариант 1. Привязка ссылки к тексту

  • Выбираем ту страницу, где нужно расположить 3Д фото
  • Переходим в режим редактирования страницы
  • На странице нужно написать текст, к которому будет привязана ссылка на фото 360 градусов, например «Посмотреть 3Д фото терки»
  • Выделяем этот текст и в панели инструментов выбираем команду «Добавить ссылку»
  • В появившемся окне вводим полный путь до файла с именем «HTML5Viewer.html» ( в нашем случае это “www/3dproject.com.ua/wp-content/upload/” (см.рис.2  поз.4) – в вашем случае он будет другим, таким, куда вы разместили папку с соответствующим названием) и в конце добавляем название самого файла «HTML5Viewer.html» и нажимаем команду «Добавить ссылку».
  • Нажимаем команду «Обновить» и переходим в режим просмотра страниц
  • Указываем курсором на ссылку и смотрим 3Д фото в новой вкладке.

Вариант 2. Привязка ссылки к фотографии

  • Выбираем ту страницу, где нужно расположить 3D фото 360º
  • Переходим в режим редактирования страницы
  • Выбираем команду «Вставить» и выпадающего меню выбираем команду «Add Mtdia”, после чего на экране увидим доступные для загрузки фотографии. Если нужной фотографии нет, ее нужно загрузить, воспользовавшись командой «Загрузить файлы»
  • После выбора фото, на экране откроется окно «Параметры изображение» где необходимо заполнить поля описания.
  • Указываем размер окна  для фотографии в пикселях , расположение окна на странице и ссылку (полный путь до файла с именем «HTML5Viewer.html»), как в варианте 1 и нажимаем команду «Добавить»
  • Нажимаем команду «Обновить» и переходим в режим просмотра страниц
  • Указываем курсором на фото и смотрим предметное 3D фото в новой вкладке.

Вариант 3. Привязка ссылки к фото в формате Gif

Все то же самое, как в варианте 2, но вместо фотографии используем фото в формате гиф.  В этом случае на странице сайта посетитель увидит вращающееся фото, кликнув на которое произойдет запуск 3Д-фото в новой вкладке. Второй способ вставки 3D фото 360º более сложный, так как требует написания специального кода. В этом случае на веб-странице, где Вы хотите разместить фото 360º, нужно написать небольшой фрагмент кода:

<iframe src=”http://site.kiev.ua/wp-content/uploads/tour/ Название_товара/ HTML5Viewer.html” scrolling=”no” height=”480” width=”640” style=”border: 1px solid #fff”></iframe>

где,

«/tour/Название товара» – путь к ключевому файлу «HTML5Viewer.html»

«height=»480» width=»640»— рекомендуемый размер окна просмотра

Этот код нужно вставить в раздел ТЕКСТ Кнопка «текст» которая с правой стороны.

Мы чуть подправим наш код что бы он стал по центру, добавим название и поставим в нужное место :

<table>

<tbody>

<tr align=»center»>

<td align=»center»><center><span style=»color: #ffffff; font-family: Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; font-size: small;»>Название_товара</span></center><span style=»color: #333333; font-family: Georgia, ‘Times New Roman’, ‘Bitstream Charter’, Times, serif; font-size: small;»><span style=»line-height: 19px;»><br /> <iframe src=» http://site.kiev.ua/wp-content/uploads/ Название_товара/ HTML5Viewer.html» scrolling=»no» height=»480″ width=»640″ style=»border: 1px solid #fff»></iframe></span></span></td>

</tr>

</tbody>

</table>

Сохраняем документ и смотрим результат на сайте.  Если вы сделали все правильно, то после обновления страницы будет вращаться предметное 3D фото.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Новости

Описание способа реализации концепции Prozorro
23.10.2019

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



Компания BigRep представила промышленный широкоформатный 3D-принтер STUDIO G2
01.10.2019

На проходящей в Детройте выставке RAPID+TCT немецкий производитель FFF/FDM 3D-принтеров BigRep представил новые продукты и прототипы, в том числе модернизированный вариант оригинального 3D-принтера Studio.



Все для геймеров: IKEA запустит линейку 3D-печатных игровых аксессуаров
29.09.2019

Торговая группа IKEA в сотрудничестве с компаниями UNYQ и Area Academy работает над новой коллекцией товаров – персонализированными аксессуарами для игроманов.



Компания XYZprinting представила цветной 3D-принтер со встроенным лазерным гравером
27.09.2019

Тайваньский производитель 3D-принтеров XYZprinting анонсировал очередную новинку (новый) — 3D-принтер da Vinci Color 5D. Новый da Vinci Color 5D



Польская компания Zortrax предлагает новые материалы для 3D-печати
16.09.2019

Польская компания Zortrax, производитель 3D-принтеров и материалов, пополнила линейку фирменных материалов для 3 печати несколькими вариантами фотополимерных смол и филаментов.



Галерея

Поиск по сайту

Фотобанк