Как заказать. ДоставкаСкачатьКонтакты

+7 926 115 49 91
addspace@inbox.ru

Поворотные столы для 3D Поворотные платформы Lazy Susan  
ВСЕ МОДЕЛИ Ручные столы M Как сделать 3D вращение  
Для фотосъемки 360° Платформа с тросом PL GIF анимация вращения  
Для видеосъёмки Столы-автоматы SA Вращение HTML5+JavaScript  
Для 3D сканирования Серия Муравей Программа Object2VR  
ЦЕНЫ Платформы Пёс Программа PhotoScape  

Вращение на HTML5 + JavaScript: готовое бесплатное решение для вашего сайта

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

Пример простого скрипта для вращения фотоизображения на 360°. Рекомендации и html-шаблоны

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

Работает в браузерах: Chrome, Firefox, Opera, Safari, Edge, IE, Yandex.
Есть поддержка сенсорных экранов мобильных устройств.

Последовательность действий на схеме:

Фото
крутящееся изображение из фото
Видео
крутящееся изображение из видео

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

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

Поворотный стол для 3D фотосъёмки
Поворотный стол для 3D фотосъёмки

Если вы фотографируете камерой смартфона или планшета на Android, то для съемки предметов на поворотном столе рекомендуем вам приложение Open Camera. Приложение позволяет вести съёмку серий кадров в автоматическом режиме с дистанционным управлением голосом или другим звуком, не касаясь устройства в процессе съёмки. Приложение Open Camera доступно бесплатно на Google Play.

Приложение Open Camera

Можно отснять короткое видео вращающегося предмета, и тоже получить аналогичную серию JPEG изображений. Например, бесплатной программой Free Video to JPG Converter. Нужно только обрезать видеофрагмент до точно одного оборота, убрав лишнее. При конвертации в JPEG выберите режим фиксированного количества фотоизображений, и тогда программа разобьёт оборот предмета на определённое число кадров, независимо от продолжительности видео. Удобно делать серии из 50 кадров - вращение получается достаточно плавным, и есть готовые HTML шаблоны на 50 кадров.

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

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

Если у вас нет программы для пакетной обработки изображений, вы можете найти и скачать в интернете программы, например PhotoScape - интуитивно понятная бесплатная программа. Имеет много режимов обработки изображений. Программа понимает различные форматы файлов. Применяется также для создания GIF анимации из фотографий.

Теперь пронумеруйте файлы изображений последовательно: 1.jpg, 2.jpg, 3.jpg, ... и так далее, в зависимости от количества отснятых ракурсов. Ещё удобнее автоматическое переименование файлов, например, средствами Windows (групповое переименование файлов) - так получается быстрее и без ошибок.

Для корректного группового переименования файлов средствами Windows поместите всю серию фотоизображений в отдельную папку. Выделите все файлы клавишами 'CTRL/A' или через меню 'Правка/Выделить все', и нажмите клавишу F2 (или правой кнопкой мыши ('Переименовать'). Курсор выделит первый файл в списке и предложит вам изменить имя файла (задать префикс). Введите только один символ дефис '-', и нажмите 'Enter'. Система автоматически переименует файлы '- (1), - (2), - (3)' и так далее. В качестве префикса везде будет стоять дефис.

Дефис удобно использовать, т.к. он не зависит от языковой раскладки клавиатуры, и на стандартной клавиатуре он всегда в верхнем углу справа. Без префикса автоматическое переименование подставит перед номерами пробел, а при последующем копировании файлов пробелы могут произвольно удаляться. Изменятся имена файлов и изображения перестанут отображаться скриптом вращения. Подставленный впереди дефис гарантированно защищает от этого.

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

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

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

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

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

В результате получаем: каждая html-страница с вращающимся изображением лежит в отдельной папке вместе со служебными файлами javascript, а в подпапке jpeg/ лежат все картинки, относящимися к этому вращающемуся изображению.

Например, в папке odekolon-312/:

odekolon-312

index.html
image360.jquery.js
jquery-1.12.0.min.js

jpeg

1.jpg
2.jpg
3.jpg
...
36.jpg

Файл index.html - это html-страница с вращающимся изображением.
Файлы image360.jquery.js и jquery-1.12.0.min.js - служебные, содержат программный код на javascript.
В подпапке jpeg/ лежат 36 фотографий.

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

В файле index.html задан размер изображения. В разделе <style> параметр max-width определяет максимальную ширину картинки - это и будет текущий размер изображения на экране. Например:

<style>
#rotation{
max-width: 400px;
min-width: 200px;
overflow: hidden;
margin: 0 auto;
padding: 0;
}
...
</style>

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

Вы cможете открыть файл для редактирования (например, стандартной программой Блокнот/Notepad), изменить этот параметр под дизайн вашего сайта, и сохранить изменения. Только не используйте для редактирования Microsoft Word.

Посмотрите пример вращения с уже готовыми фотоизображениями. Ссылка для скачивания:
templates360.zip

Скачайте архив, распакуйте его. В папке primer (1,2,3)/ дважды щёлкните на файл index.html, и в открывшемся окне браузера вы увидите изображение флакона, которое можно вращать мышью. В подпапке jpeg/ сложены 36 фотоизображений флакона во всех ракурсах его вращения.

В папке primer (windows rename)/ находится аналогичный набор файлов, только там нумерация файлов изображений в подпапке jpeg/ сделана автоматическим переименованием Windows.

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

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

<iframe src="example360/index.html" width="300" height="360" align="middle" scrolling="no" frameborder="1"></iframe>

Получается окно с размерами 300х360 точек, в тонкой рамке, а в окне - вращающееся изображение (вращайте мышью или пальцем):

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

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

Для вашего удобства сделан набор готовых шаблонов - это файлы html, уже настроенные на разное количество ракурсов вращения: 32, 36, 48, 50, 64, 72, 96, 100. Шаблоны также находятся в архиве templates360.zip.

Наборы шаблонов лежат в папках html:
html (1,2,3)/
html (windows rename)/

1,2,3 - здесь шаблоны для показа изображений с простой нумерацией 1, 2, 3 и т.д.
windows rename - здесь шаблоны для показа изображений с нумерацией, сделанной групповым переименованием Windows - (1),- (2),- (3) и т.д.

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

Размер изображения настраиваемый. Лучше выбрать один единый размер крутящихся изображений для всего вашего сайта, и в дальнейшем не потребуются коррективы. Для показа товаров разной формы может быть удобен квадрат с размерами 300х300, 400х400 или 500х500 пикселов.

Итак, вы отсняли и подготовили серию изображений вашего предмета с нужными вам размерами. Что делать дальше? Скопируем ваши изображения в папку primer/jpeg/ на место прежних картинок. Настроим html-шаблон под размер вашей картинки. Для этого возьмем файл index.html из соответствующей папки html/ (32, 36, 48, 50, 64, 72, 96, 100), скопируем его в папку primer/ и отредактируем. Используем стандартную программу "Блокнот" (Notepad, WordPad). Не используем Microsoft Word!

В разделе <style> вы найдёте параметр max-width - он задаёт ширину (и вообще размеры) окна с вращающимся изображением. Ширина указывается в пикселах. Измените эту цифру на нужную вам, например, max-width: 500px; и сохраните файл. Больше никаких изменений в файл не вносите. Поместите отредактированный html-файл в папку example360/ - замените лежащий там старый index.html.

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

Если по количеству ракурсов вам не подходит ни один из готовых шаблонов, вы можете дополнительно отредактировать файл index.html: в разделе <div id="rotation"> удалить последние строки списка (сохраняя на месте тег </div>). Или наоборот, добавить в конец списка несколько однотипных строк с увеличивающимися номерами файлов jpg, например, из 36 сделать 40:

<div id="rotation">
<img src="jpeg/01.jpg">
<img src="jpeg/02.jpg">
<img src="jpeg/03.jpg">
...
<img src="jpeg/34.jpg">
<img src="jpeg/35.jpg">
<img src="jpeg/36.jpg">

<img src="jpeg/37.jpg">
<img src="jpeg/38.jpg">
<img src="jpeg/39.jpg">
<img src="jpeg/40.jpg">

</div>

В случае затруднений с применением данного скрипта, или ошибок в его работе, сообщите нам пожалуйста по адресу: addspace@inbox.ru

 

Другие способы получения вращающихся 3D изображений

Общие рекомендации: способы получения крутящихся изображений, съемка, освещение, софт и т.д.

3D съемка предметов смартфоном с помощью Open Camera

Анимация вращения из серии фото:

- GIF анимация онлайн

- GIF анимация из фотографий бесплатной программой PhotoScape

- GIF анимация программой UnFREEz

- HTML5 анимация программой Object2VR

- HTML5 и GIF анимация программой 360° Product Viewer

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

Анимация вращения из видео:

- GIF анимация из видео программой ThunderSoft Video to GIF Converter

- GIF анимация бесплатной программой Free Video to GIF Converter

- GIF анимация из отснятого видео онлайн

- Управляемое вращение из видео (Free Video to JPG Converter + HTML5)

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

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

Поворотные столы для предметной 3D съемки

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

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

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

Компактные поворотные столы для 3D фотосъемки предметов с вращением диска рукой (серия M)
Низкие цены, неубиваемая конструкция. Идеальный вариант для небольших интернет-магазинов и частных фотографов
Поворотные столы для предметной 3D фотосъемки с автоматическим вращением диска (серия SA)
Высокая производительность, несколько режимов работы, гибкость настроек. Рассчитаны на большую нагрузку, в т.ч. на съемку людей. Возможна синхронизация с фотокамерой

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

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

Поворотные столы для видеосъемки и 3D сканирования предметов и людей (серия Пёс)
Диаметр до 3 метров, нагрузка до 850 кг в зависимости от модификации
Поворотные столы с вращением рукой (серия LS)
Простой, компактный и недорогой

Поворотная платформа для съемки, вращаемая тросом (PL)

 
Платформа для съемки с вращением тросом
Малобюджетное решение для видеосъёмки людей и предметов

Арендовать платформу PL-60
 

Нужна консультация по поворотному столу? Ответим на ваши вопросы:

Вопрос по телефону Вопрос по e-mail Связь по Whatsapp Связь по Viber

 

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

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

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

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

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

Сделать крутящийся центр стола своими руками? К вашим услугам детали для самостоятельной сборки

Альтернативный вариант: детали для самостоятельной сборки крутящихся столешниц Lazy Susan

 

© Роман Шляпников, г. Москва