3d объект на сайте (без flash)

На сайтах многих интернет магазинов можно увидеть интерактивные изображения товаров, которые можно поворачивать с помощью курсора мыши и рассматривать со всех  сторон. Как эти картинки например:

Этот эффект меня заинтересовал, и я нашел один способ, как можно реализовать 3d объект на сайте. Какие-то знающие ребята из проекта beono.ru сделали соответствующий скрипт, который мне удалось применить. Сам сайт  beono.ru, на сегодняшний день не доступен, и больше ничего о создателях скрипта я не знаю.

Для реализации поворота объекта на сайте нам понадобятся:

• Фотоаппарат (любой, к которому можно прикрутить штатив)
• Штатив (любой, к которому можно прикрутить фотоаппарат)
• Поворотный стол
• Графический редактор (фотошоп например)
• Скрипт.

Я брал Nikon Coolpix 7700 – хорошая мыльница. Штатив  – самый маленький обычный уродец с гибкими ногами – его вполне достаточно, хотя если есть хороший штатив – хуже не будет.

Поворотный стол состоит из основания и поворотной платформы с угловой разметкой, например через 20 градусов, или через 10, или через любое кол-во градусов, главное чтобы сегменты были одинаковыми. Я сделал такой из конструктора лего, куска бумаги с разметкой и скотча.

Общий порядок действий при создании интерактивного 3d объекта на сайте:

1. Ставите объект в центр вращения поворотного стола, так чтобы ось предмета и ось вращения стола совпадали. Настраиваете фотоаппарат в ручном режиме – так чтобы он фотографировал все кадры одинаково, НЕ подстраиваясь автоматически. Поворачиваете стол нужное количество раз, в соответствии с разметкой стола, при этом фотографируя каждое положение.

2. Собираете в фотошопе на разные слои все получившиеся фотографии, обрабатываете их одинаково, убираете фон, делаете коррекцию и тд.

3. Растягиваете холст так, чтобы в него входило по горизонтали  количество ваших полученных изображений на 1 меньше, чем кол-во сегментов на поворотном столе, в соответствии с которыми вы фоткали. Например кадры у вас шириной 300 px, кол-во сегментов 20, значит 300 х 19 = 5700 px такая должна получиться ширина. Выставляете ваши слои с последовательными кадрами в горизонтальный ряд, стык в стык один за другим и сохраняете это в файл jpg. Получиться должно примерно так:
4. Берете папку со скриптом и сопутствующими файлами по этой ссылке –  

Текст только для подписчиков.
Подписаться на свежие статьи kopirka-ekb.ru и получить на почту пароль доступа к скрытым материалам.
Введите пароль и нажмите enter:

. Заливаете в корневой каталог сайта. В папку images, ту которая в папке со скриптом, заливаете картинку из п.3.

5. Редактируете файл 123.htm – находите там путь к картинке с расширенbем jpg и меняете имя этой картинки на имя файла из п.3. так же можете поменять и имя файла 123.htm

6. Вставляете на сайт. Я не программист, напрямую мне вставить запись на блог не удалось  – я вставил через iframe. Вот такой код:

<iframe style=”float: left; margin: 0 20px 20px 0;” src=”путь к файлу 123.htm” height=”высота фрэйма” width=”ширина фрэйма” frameborder=”0″></iframe>

Вот это: style=”float: left; margin: 0 20px 20px 0;” – нужно для обтекания текстом, и не обязательно.

Вот видео на эту тему где все подробно:

Произошло досадное недоразумение и в видео я забыл сказать о важном параметре в файле 123.htm или в моем случае он называется obezian.htm. Вот в этой строке: var obGlobus = $(“.beonoGlobus”).beonoGlobus({ framesCount: 19, api: “all”});
число 19 это количество сегментов, на которое вы поделили поворотный стол минус 1. Я делил на 20, значит у меня 20-1=19. Это число можно менять, в соответствие с тем, на сколько частей вы делите ваш поворот.

Непременно поделитесь с друзьями!