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

Поворотные столы для 3D Кран для 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. Дважды щёлкните на этот файл, и вы увидите изображение флакона, которое можно вращать мышью.

Если вы не хотите углубляться в детали кодировки html-страниц, перейдём к готовым шаблонам

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

Вы можете отредактировать шаблоны, внести изменения и в количество ракурсов, и в размер изображения. Лучше сразу выбрать один единый стандарт для всего вашего сайта, и тогда в дальнейшем вам не потребуются коррективы. Наиболее универсальным будет квадрат с размерами 300х300 или 400х400 пикселов. Чтобы задать нужный вам размер изображения, откройте шаблон (36.htm или любой другой) для редактирования, например стандартной программой "Блокнот". В верхней части служебного текста вы найдёте параметры height и width - они задают размеры окна с вращающимся изображением. Высота и ширина указываются в пикселях (в данном случае установлены высота 342 и ширина 252 пикселя). Измените эти цифры на другие, нужные вам. Подготовьте серию изображений предмета с этими же размерами. Поместите файл htm и все изображения в одну отдельную папку.

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

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

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

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

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.

 

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

 

Если рамка не нужна, установите параметр frameborder="0", и вращающееся изображение будет вставлено без рамки.

 

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

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

2) HTML5 и GIF анимация с помощью программы 360° Product Viewer

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

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

 

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

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

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

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

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

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

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

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

Комплекты деталей для сборки поворотных столов, платформ, подиумов (серия Z)

 
Комплекты деталей для самостоятельной сборки поворотных платформ (подиумов) большой грузоподъемности с вращением вручную (серия Z)
Новая серия, в разработке
 

 

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

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

Тел: 8(495)343-3242

Моб: 8-926-115-4991

E-mail: addspace@inbox.ru

 

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

Кран для полусферической 3D фотосъемки предметов

Кран для полусферической 3D фотосъемки предметов

 

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

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

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