Публикация 3D (360°) контента

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

По результатам нашей работы вы получаете:

  • - Исходники фотографий в RAW формате;
  • - Обработанные посредством свето и цветокоррекции фотографии в JPG формате для загрузки в плеер;
  • - Рекомендации по пользованию программными продуктами.

Мы рекомендуем вам воспользоваться нашим стандартным плеером (скачать здесь) или интерактивным программным комплексом MEGAVISOR. Это хостинг-плеер, способный хранить у себя произведенные секвенции и интегрировать их в ваш ресурс посредством «кода вставки». Либо вы можете воспользоваться любым сторонним ПЛЕЕРОМ на усмотрение вашего IT-специалиста. Современные программные продукты позволяют без особых проблем установить высокотехнологичный контент на любой сайт.

Ниже описан пример использования стороннего плеера:

Шаг 1. Подготовка контента

На руках у вас есть множество изображений одного предмета, но на каждом из них он немного повернут или сдвинут относительно предыдущего изображения. Так запечетляется в движении любой предмет на кипопленке. По сути, 3D фото (или фото 360°) — это и есть набор кадров, похожих на кинопленку. Необходимо только заставить их отображаться по кругу.

Все эти кадры должны быть пронумерованы в правильном порядке. Скорее всего, все файлы, которые вы получили, уже пронумерованы и сложены как требуется, но правильный порядок и нумеровку можно легко проверить, открыв папку с кадрами у себя на компьютере. В конечном итоге вы должны иметь набор файлов, выстроенных по следующему принципу:
item_01.jpg, item_02.jpg, item_03.jpg, ... , item_nn.jpg. Загрузите их на сервер в отдельную папку.


Шаг 2. Установка проигрывателя на сайт.

Для начала необходимо подключить библиотеку jQuery и скрипт проигрывателя.
Библиотеку jQuery можно взять здесь
Бесплатный скрипт проигрывателя можно взять здесь
Подключите библиотеку и проигрыватель между тегами <head></head>:

<script src='jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='player360.js' type='text/javascript' /></script>

Далее, в требуемом месте HTML кода размещаете контейнер, который должен проигрывать необходимое содержимое (пример):

<div class="photo360" id="spinTv" data-source="/content/spin/tv/tv_{frame}.jpg"
data-digits="2" data-frames="61" data-width="427" data-height="300" data-first-frame="3" data-auto="false"
data-reverse="true" data-animate="true" data-sense="1" data-frameTime="40"></div>

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

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

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

data-source
(обязательный) задает адрес для загрузки кадров. В адресе используется переменная {frame} в которую автоматически подставляется номер кадра

data-digits
(обязательный) указывает количество цифр, используемое в нумерации кадров. Проигрыватель соберет из данных следующие адреса:
/content/spin/tv/tv_01.jpg
/content/spin/tv/tv_02.jpg
/content/spin/tv/tv_03.jpg
и так далее. Номер кадра дополняется нулями спереди ("01", "02", "03") до указанного количества

data-frames
(обязательный) указывает количество кадров в наборе

data-width
(обязательный) оборажаемые габариты проигрывателя по ширине (могут отличаться от габаритов контента)

data-height
(обязательный) оборажаемые габариты проигрывателя по высоте (могут отличаться от габаритов контента)

data-first-frame
номер кадра с которого начинается воспроизведение

data-auto
начинать загрузку кадров и воспроизведение сразу при загрузке страницы

data-reverse
в случае значения "true" вращение происходит в противоположную сторону

data-animate
в случае значения "true" начинает автоматическое вращение после загрузки всех кадров

data-sense
устанавливает чувствительность мышки при вращении

data-frameTime
устанавливает время отображения кадра при автоматической анимации. 40 соответствует 25-ти кадрам в секунду

Итак, мы получим сделующий результат:

Oooops! Видно только кнопку "проиграть" Она работает (можете кликнуть), уже неплохо, но нужно лучше.

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

<div class="photo360" id="spinTv" data-source="/content/spin/tv/tv_{frame}.jpg"
            data-digits="2" data-frames="61" data-width="427" data-height="300" data-first-frame="3" data-auto="false"
            data-reverse="true" data-animate="true" data-sense="1" data-frameTime="40">
            <img src="/content/spin/tv/tv_03.jpg" width="427" height="300" alt="Телевизор" />
            </div>

В итоге мы получили:

Телевизор

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

Также, есть еще несколько вероятных вариантов проигрывателей для использования: reel, 360 javascript viewer, jQuery.Threesixty, Ajax-Zoom 360°/3D, Dopeless Rotate. Выбирайте понравившийся.

Удачных экспериментов :)