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

+7 926 115 49 91
addspace@inbox.ru

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

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

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

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

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

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

Работает в браузерах: Chrome, Firefox, Opera, Safari, Edge, IE, Yandex.

Недостаток скрипта: нет функции управляемого масштабирования картинки (зума).

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

Фотосъемка
крутящееся изображение из фото

Результат
Видеосъемка
крутящееся изображение из видео

Результат

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

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

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

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

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

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

Видеосъемка
Можно отснять короткое видео вращающегося предмета на поворотном столе для видео 360° и получить серию JPEG изображений.

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

Для получения серии JPEG из видеофайла существуют программы-конвертеры, например, Free Video to JPG Converter.

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

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

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

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

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

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

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

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

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

В данном примере мы используем 36 изображений и простую нумерацию файлов от 1 до 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>

Если изображение имеет ширину больше 400 пикселей, оно будет автоматически уменьшено до 400.

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

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

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

Скачайте архив, распакуйте его. Примеры работающего вращения находятся в папках:
primer (1,2,3) left/
primer (1,2,3) right/
primer (windows rename) left/
primer (windows rename) right/

Вариант right лучше использовать, если съёмка была сделана с вращением по часовой стрелке (вправо), а вариант left - против часовой стрелки (влево).

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

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

Флакон в этих примерах был отснят с вращением вправо, поэтому вариант right смотрится нормально, а вариант left - странно.

Применяйте для ваших проектов тот или другой вариант (left или right), в зависимости от направления вращения при съемке.

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/ вы перенесёте ваши фотоизображения. Количество фотоизображений и их нумерация должны соответствовать выбранному вами шаблону. Если вращение не работает, значит допущена ошибка с нумерацией, или файлов меньше, чем надо.

Размер изображения настраиваемый. Лучше выбрать один единый размер крутящихся изображений для всего вашего сайта, и в дальнейшем не потребуются коррективы. Для показа товаров разной формы может быть удобен квадрат с размерами 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

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

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

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

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

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

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

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

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

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

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

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

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

БАЗА 360 - Вращаемое основание для 360° съёмки

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

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

Платформа ПОРТРЕТ 360 для видео-селфи с ручным вращением

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

Сделать поворотный стол для съемки своими руками

 
Поворотный стол своими руками
 

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

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

 

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

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

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

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

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

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

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

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

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

 

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