Как сделать вращающееся 3D фото предмета на HTML5. Скрипт для вращения фотоизображения на 360 градусов

Поворотные столы для 3D Поворотный столик Lazy Susan Файлы для скачивания Контакт Compact turntables for 360 product photography with manual rotation

Вращение на HTML 5 + JavaScript: готовое решение для вашего сайта. Пример простого скрипта для вращения фотоизображения на 360 градусов. Рекомендации и бесплатные шаблоны

Владельцам интернет-магазинов и фотографам: вращающиеся изображения товаров на HTML5 + JavaScript

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

1. Перед началом работы

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

2. Готовим изображения

Отснятую серию фотографий уменьшите до одинакового небольшого размера, в соответствии с дизайном вашего сайта. Например, до размера 500 точек по длинной стороне. Для всех фотографий в серии - одинаковый размер. Рекомендуем вам обрабатывать изображения программой, поддерживающей пакетный режим обработки (программа обрабатывает сразу всю серию изображений, это очень удобно). Сохраняйте фотографии в формате JPEG: за счёт сжатия файлы получаются небольшие, а чем меньше файлы, тем быстрее будет загрузка вращающейся картинки на вашем сайте.

Если у вас нет программы для пакетной обработки изображений, вы можете найти и скачать в интернете бесплатные программы, например:
ImBatch - может быстро конвертировать формат, изменять размер, поворачивать, ставить водяной знак (логотип), переименовывать и выполнять другие задания за один проход.
XnConvert - изменение размера, поворот, обрезка, добавление водяного знака или текстовой надписи, автоматическая коррекция уровней и контрастности, цветокоррекция, конвертирование в другой формат и переименование.
FastStone Photo Resizer
- программа может конвертировать файлы и переименовывать их. Дополнительные возможности: изменение размера изображений, поворот, обрезка, изменение размера холста, яркости, контраста, повышение четкости, вставка водяного знака (логотипа).
Photopus - изменение размера, поворот, коррекция уровней, контрастности, цвета, конвертирование в другой формат и переименование (но в бесплатной версии нет вставки логотипа).
Fotosizer - позволяет быстро уменьшить размер фотографий, при обработке может выполняться конвертирование в заданный формат.
Moo0 ImageSizer - очень простая программа для изменения размера изображений.
PIXresizer - удобный интерфейс, конвертация и изменение размера изображений.

Пронумеруйте файлы изображений последовательно: 01.jpg, 02.jpg, 03.jpg, ... и так далее, в зависимости от количества ракурсов. Если ваша программа пакетной обработки не поддерживает автоматическое переименование, вы можете скачать и использовать бесплатную программу Rename Master или другую аналогичную.

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

Исходные фотоизображения для создания вращающегося 3D ролика

3. Расположение папок с файлами на сайте

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

В результате получаем: каждая html-страница с вращающимся изображением лежит в отдельной папке вместе со всеми картинками, относящимися к этому вращающемуся изображению. Например, в папке odekolon находятся 36 фотографий и файл rolik.htm:

http://site.ru/odekolon/
01.jpg
02.jpg
03.jpg
...
36.jpg
rolik.htm

Такое расположение файлов позволит вам использовать однотипные (или вообще одинаковые) html-страницы с вращением предмета. Только картинки будут разные. Упрощается ваша дальнейшая работа с сайтом.

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

4. Кодировка html-страницы с вращающимся изображением

Первые две строки html-кода задают кодировку страницы, они должны быть такие:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

5. Вставляем на html-страницу стили

В раздел <head> вставляем строки:

<style type="text/css">
table th, table td
{
padding: 0px;
}
table img
{
height: 342px;
width: 252px;

}
</style>

Параметры height и width задают размеры окна с вращающимся изображением - высота и ширина в пикселях (в данном случае высота 342 и ширина 252 пикселя). Вы можете менять эти параметры по желанию. Рекомендуем вам использовать во всех 3D роликах на вашем сайте одинаковый размер картинок. Вы установите параметры один раз и можете забыть о них, вам никогда не понадобится их менять.

6. Вставляем на html-страницу будущее вращающееся изображение

В разделе <body> в соответствующем месте (где у вас должно быть окно с вращающимся изображением) вставляем такую заготовку:

<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="" id="product1" />
</td>
</tr>
</table>
<div id="dvImages" style="display: none">
<img src="01.jpg" />
<img src="02.jpg" />
<img src="03.jpg" />
<img src="04.jpg" />
<img src="05.jpg" />
<img src="06.jpg" />
<img src="07.jpg" />
<img src="08.jpg" />
<img src="09.jpg" />
<img src="10.jpg" />
<img src="11.jpg" />
<img src="12.jpg" />
<img src="13.jpg" />
<img src="14.jpg" />
<img src="15.jpg" />
<img src="16.jpg" />
<img src="17.jpg" />
<img src="18.jpg" />
<img src="19.jpg" />
<img src="20.jpg" />
<img src="21.jpg" />
<img src="22.jpg" />
<img src="23.jpg" />
<img src="24.jpg" />
<img src="25.jpg" />
<img src="26.jpg" />
<img src="27.jpg" />
<img src="28.jpg" />
<img src="29.jpg" />
<img src="30.jpg" />
<img src="31.jpg" />
<img src="32.jpg" />
<img src="33.jpg" />
<img src="34.jpg" />
<img src="35.jpg" />
<img src="36.jpg" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/matdumsa/jQuery.threesixty/master/jquery.threesixty.js"></script>
<script type="text/javascript">
$(function () {
//Load the image URLs into an Array.
var arr = new Array();
$("#dvImages img").each(function () {
arr.push($(this).attr("src"));
});
//Set the first image URL as source for the Product.
$("#product1, #product2, #product3").attr("src", arr[0]);
//Click mode.
$("#product1").threesixty({ images: arr,
method: 'click',
sensibility: 2
});
});
</script>

Параметр sensibility (чувствительность) задаёт скорость вращения изображения относительно движения мыши (обычно в пределах 1-2). В данном случае 2.

Заготовка сделана для 36 ракурсов вращения, используется 36 фотоизображений, каждое размером 342х252 точек.

7. Готовые шаблоны для скачивания

Для вашего удобства мы сделали набор готовых шаблонов - файлов html - на разное количество ракурсов: 18, 24, 32, 36, 48, 64, 72, 96. Скачайте архив, распакуйте его и выберите подходящий для вас html-шаблон. Ссылка для скачивания: html.rar

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

8. Завершение работы, проверка результата

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

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

9. Быстрая вставка с помощью <iframe>

Очень удобно вставлять вращающиеся изображения на страницы вашего сайта с помощью простого html-тега <iframe>. В этом случае ролик "подгружается" на вашу страницу из внешнего файла, и в нужном месте вы получите окно с вращающимся изображением. Например, вот так вставляется изображение из файла 36.htm на страницу сайта:

<iframe width="300" height="360" src="http://site.ru/odekolon/36.htm" frameborder="1"></iframe>

Получается окно с размерами 300х360 точек, в тонкой рамке, а в окне - вращающееся изображение, сформированное скриптом из файла 36.htm.

 

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

 

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

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

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

Поворотные столы для 3D съемки предметов с вращением диска рукой (серия M)

Автоматические поворотные столы для 3D фотосъемки предметов (серия F)

Компактные поворотные столы для 3D фотосъемки предметов с вращением диска рукой (серия M)
Самые низкие цены, неубиваемая конструкция, быстрая окупаемость. Удобен для съемки в лайткубе. Идеальный вариант для небольших интернет-магазинов и частных фотографов
Цены
Где купить поворотные столы серии M (наши дилеры): Москва, Санкт-Петербург, Казань, Нижний Новгород, Самара, Екатеринбург, Новосибирск, Кемерово, Ростов-на-Дону, Коломна, Рязань, Тула, Томск
Автоматические поворотные столы для 3D фотосъемки предметов (синхронизация с фотокамерой, вращение без остановок, серия F)
Недорогой поворотный стол-автомат с диском 70 см. Синхронизация с фотокамерами Canon, Nikon, Pentax, Sony. Удобный диаметр диска для съёмки самых разных предметов. Прост в эксплуатации: подключай и снимай
Цены
Где купить поворотные столы F-70

Автоматические поворотные столы большой грузоподъемности для 3D съемки (серия SA)

Универсальные поворотные столы для 3D фото, видеосъемки и 3D сканирования предметов и людей. Управление от компьютера (серии Муравей и Пёс)

Поворотные столы для предметной 3D фотосъемки с автоматическим вращением диска (серия SA)
Высокая производительность, несколько режимов работы, гибкость настроек. Рассчитаны на большую нагрузку, в т.ч. на съемку людей. Поддерживается синхронизация с фотокамерами Canon, Nikon, Pentax, Sony по специальному кабелю.
Цены
Универсальные поворотные столы для 3D фото, видеосъемки и 3D сканирования предметов и людей. Управление от компьютера (серии Муравей и Пёс)
Три сферы применения: 3D фотосъёмка, видеосъемка и 3D сканирование - в одном устройстве. Диаметр от 40 см до 3 метров, максимальная нагрузка 60 - 1000 кг в зависимости от модификации
Цены

 

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

Наши координаты. Поворотные столы для предметной 3D фотосъемки Контакт:

Тел: 8(495)343-3242

Моб: 8-926-115-4991

E-mail: addspace@inbox.ru

 

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

Поворотный столик - подставка для блюд и тортов Lazy Susan

Поворотный столик - подставка для блюд и тортов Lazy Susan

Описание программы UnFREEz - Рекомендации по применению программы UnFREEz для создания 3D роликов - Поворотные столы для предметной 3D фотосъемки - Поворотные столы для 3D фотографии