Эксперименты с 3D баннерами

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




[spoiler]

Рис. 1. Товар 3D на сайте mvideo.ru



Рис. 2. Товар в 3D на сайте Eldorado.ru

А работает это примерно так:


Рис. 3. 3D-модель телефона


А что если использовать 3D модель в баннере на главной странице? Мы решили поэкспериментировать в этом направлении и вот что у нас получилось (пример на демо-сайте):




Рис. 4. Пример работы 3D-баннера


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




Рис. 5. Административная панель для формирования 3D баннера


И здесь возникает главный вопрос, а где взять столько фотографий под разным углом одного объекта? В-первую очередь, используйте любое подходящее видео, где есть эффект вращения. Здесь важно помнить, чтобы 3D эффект был реалистичным – нужно делать скриншоты как можно чаще, но не переусердствовать. Т.к слишком большое количество кадров увеличит вес главной страницы.
Если предметы небольшие – то купите или сделайте вот такой лайтбокс:



Рис. 6. Лайтбокс для создания предметных фото


В нем вы сможете делать качественные фото объектов и поворачивать их под нужные вам углы.
Еще одним способом может быть заказ 3D модели объекта. Сделать это можно в соответствующей студии или у фрилансеров. Если речь идет о 3D-баннере, то это всего один объект, поэтому и общая стоимость создания такого баннера будет по карману каждому.
На сегодня это все. Успеха вашим проектам.

P.S. Пример реализации 3D баннера есть в нашей новой Монополии на примере магазина товаров для автомобилистов

Ссылка на решение.