Программа "360° Product Viewer" для создания вращающихся изображений в формате HTML и GIF. Описание и рекомендации по применению

Владельцам интернет-магазинов и фотографам: программа "360° Product Viewer" предельно проста в освоении и очень удобна в работе!

Перед началом работы с программой "360° Product Viewer"

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

Исходные фотоизображения должны показывать предмет в разных фазах (ракурсах) вращения: либо полный оборот на 360 градусов, либо пол-оборота на 180 градусов (bounce).

Сфотографировать серию фотоизображений предмета во вращении удобнее всего с помощью специального поворотного стола для 3D фотосъёмки

Для примера, возьмём серию изображений флакона с одеколоном, сфотографированных на поворотном столе. И на основе этих фотографий, с помощью программы "360° Product Viewer" создадим вращающийся 3D ролик в формате GIF, а затем в формате HTML.

Начинаем работать с программой "360° Product Viewer"

Запускаем программу. Вы увидите запрос на код лицензии. Если программа у вас не зарегистрирована, просто нажмите кнопку [Use free version]:

Основное окно программы выглядит так:

В разделе 1. Load Images вы видите окно загрузки изображений "Drop images here or click for load" в желтой рамке. Загрузим фотоизображения для обработки. Для этого в папке с исходными фотоизображениями выделяем все нужные файлы, и мышью втаскиваем их прямо в это окно:

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

После загрузки изображений экран выглядит так:

Настройки параметров будущего ролика

Переходим к разделу настроек 2. Adjust settings. Здесь вы можете настроить скорость вращения, указав время полного оборота предмета в секундах:

Предусмотрены ещё полезные дополнительные настройки, для этого нажмите кнопку [Advanced settings]:

На вкладке "Player" / "UI" вы можете включить или выключить различные кнопки управления вращением в ролике, а также увеличением картинки (UI означает "интерфейс пользователя"):

На вкладке "Player" / "Control" можно настроить характер управления мышью. Параметр "Drag Speed" определяет насколько послушно будет вращаться изображение при протаскивании по нему мышью. Оптимальное значение этого параметра: 0.2 или 0.3.
Галочка "Reverse Pointer Drag Direction" переключит направление вращения мышью на противоположное. Галочка "Mouse Wheel zooms" включит управление увеличением/уменьшением картинки с помощью колеса мыши:

На вкладке "Player" / "Rotation" можно включить/выключить автоматическое вращение, однократное или многократное вращение, изменить направление вращения:

Если вам нужно не полное вращение, а лишь качание предмета влево-вправо (ping-pong, bounce), то включите галочку "Bounce Rotation (if not a full 360 view)":

На вкладке "Output" / "Image Settings" можно настроить качество изображения (JPEG сжатие) и повышение резкости картинки (данная опция действует только для роликов в HTML формате):

Для возврата в основное окно программы нажмите кнопку [Return]:

Все основные настройки выполнены, переходим к разделу 3. Finish.

Ролик в формате GIF

Для создания ролика в формате GIF теперь достаточно выбрать "Animated Gif" и нажать кнопку [Create!]:

И будет создан файл GIF-анимации в указанной вами папке. Остаётся только загрузить этот файл на ваш сайт и задача решена.

Ролик в формате HTML

Для создания ролика в формате HTML выберите "HTML" и так же нажмите кнопку [Create!]:

Вам будет предложено сохранить результаты. Но в отличие от GIF-анимации, HTML-анимация представляет собой набор из нескольких основных файлов и двух папок со вспомогательными файлами. Поэтому лучше для каждого нового создаваемого ролика создавать отдельную папку, и называть папки по артикулам товаров, или по их наименованиям, или по номерам разделов вашего сайта:

Выполняется обработка:

По окончании обработки перейдите в папку с созданным роликом:

В папке будет следующий набор файлов и вспомогательных папок:

Запустив файл index.html, вы увидите готовый ролик, и именно с теми настройками, которые вы сделали.

Особенность демоверсии - ролик в формате HTML содержит лого производителя "360 by YoFla". Но эту надпись можно отключить.

Для этого откройте файл rotatetool.js для редактирования, например обычной программой "Блокнот".

Задайте поиск строки "360 by YoFla". Когда поиск покажет найденную надпись, просто удалите её, оставив на месте кавычки, и сохраните изменения.

При последующих запусках файла index.html вы больше уже не увидите логотип, он исчезнет из окошка:

Можно поступить иначе: заменить надпись "360 by YoFla" на название вашей компании, адрес сайта, номер телефона и т.д.

Как вставить вращающееся изображение на сайт

Есть несколько способов вставить готовые HTML ролики на страницы вашего сайта. Очень удобен для этих целей простой html-тег<iframe>. В этом случае картинки автоматически подгружаются на вашу страницу, и вы получаете окно с вращающимся в нём изображением. А папки с наборами файлов по каждому 3D изображению разместите в соответствующем разделе вашего сайта. Если назвать папки по артикулам товаров, то в дальнейшем вам будет проще ориентироваться.

Поручите эту работу вашему вебдизайнеру. Профессиональные рекомендации по вставке роликов на сайт есть на сайте компании YoFla (тексты на английском):
http://www.yofla.com/3d-rotate/support/manuals/

Дополнительные возможности программы "360° Product Viewer"

Можно менять цветовое оформление ролика:

Есть возможности настройки размера изображения, например подгонять изображение под дизайн вашего сайта:

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

Получение полусферических 3D изображений с помощью программы 360° Product Viewer

Программа 360° Product Viewer так же легко создаёт и полусферические 3D изображения, где предмет вращается не только по кругу, но и вверх-вниз (в рамках полусферы). Предмет можно рассмотреть и сбоку, и сверху, заглянуть во внутренние полости.

Пример полусферического 3D изображения (вращайте картинку мышью во всех направлениях):

Сначала предмет фотографируется на поворотном столе с разными наклонами камеры относительно плоскости вращения стола. Результат съемки - это несколько серий (рядов) фотографий предмета во вращении. Серии показывают предмет с разных точек зрения - от фронтального бокового вида до вида сверху.

Чтобы получить полусферическое 3D изображение, в настройках указываем программе, что количество рядов изображений "Vertical Steps" будет больше единицы (пишите столько, сколько рядов вы отсняли). И можно задать количество кадров в ряду (кадров на один оборот предмета) "Horizontal Steps":

Загруженные фотоизображения будут расставлены по "столбцам" и "рядам". Переход от картинки к картинке в одном ряду создаёт ощущение вращения предмета, а движение по столбцу вверх-вниз меняет угол наклона предмета. После обработки программой столбцы дадут движение предмета мышкой по вертикали, а ряды - по горизонтали.

Программу 360° Product Viewer можно загрузить с сайта:
http://www.yofla.com/3D rotate/download/

Посмотрите также информацию по другим способам получения вращающихся 3D фотоизображений:

1) Простое вращение на HTML5: готовое решение для вашего сайта

2) HTML5 и Flash анимация с помощью программы Object2VR

3) GIF анимация с помощью программы UnFREEz

4) GIF анимация с помощью программы PhotoScape

5) Сайты для автоматического создания вращающихся изображений sirv.com, 3dbin.com и megavisor.com. Эти сайты позволяют быстро получить готовые вращающиеся изображения из серии фотографий предмета на поворотном столе. Отличное решение "для чайников" и неспециалистов! Поддерживается вращение мышью влево-вправо, дополнительно можно включить или выключить самостоятельное вращение изображения
Есть бесплатные и платные варианты пользования этими сайтами, бесплатные имеют некоторые ограничения по количеству создаваемых проектов. Сайты англоязычные.

6) Программа Easy 3D Scan - создание 3D изображений на основе отснятого видео

Для удобства фотосъемки предметов в разных фазах (ракурсах) вращения предлагаем вам специальное оборудование:

Оборудование для 3D фотографии. Поворотные столы для предметной 3D фотосъемки

Аккуратно и качественно сфотографировать предметы во вращении помогут вам специализированные поворотные столы для 3D фотосъемки:

Задайте вопрос по поворотным столам для 3D фотосъёмки: addspace@inbox.ru

Контакты:
Моб: 8-926-115-4991
E-mail: addspace@inbox.ru

Другие виды нашей продукции:

Напольные поворотные платформы

Крутящаяся середина для стола Lazy Susan. Вращающийся столик-подставка для блюд и тортов

Владельцам кафе и ресторанов: крутящиеся середины для столов по вашему заказу