JavaScript: Как сделать 3D обзор предмета?

Дата: 29.05.2016 в 19:34, Категория: JavaScript
  • 5168
  • 6
JavaScript: Как сделать 3D обзор предмета?

Возможно вы замечали в разных интерне-магазинах как при наведении на изображение, товар начинал крутиться с разных ракурсов. Так вот, об этом у нас и будет идти речь в данной статье. Я расскажу про интересный плагин под названием Turntable.js благодаря которому мы и сделаем подобное. С данным плагином я столкнулся недавно на одном из репозиторий GitHub - PolarNotion и решил поделиться в своем блоге.

Прежде всего немного описания плагина от автора (спасибо гугл транслейту):

Turntable.js является отзывчивым слайдер JQuery, который позволит вам вращать через список изображений, как ваши мышь (или палец) зачисток через контейнер. Думайте об этом как FlipBook сделанный с Javascript, а не бумаги. Все, что вам нужно, это набор изображений и JQuery. Это свежая альтернатива типичным защелкиванием к слайду 'JQuery галереи.

Думаю о чем хотел сказать автор, гугл нам перевел все очень понятно и доходчиво.

А теперь, если вы все поняли, давайте в качестве примера возьмем любое видео с ютуба и сделаем из него мини обзор с помощью этой библиотеки. Я провел долбанных 40 минут в поиске видео, где есть просмотр товара в обзоре 360. Хотел для теста взять iPhone, но ничего кроме этого чёртового TomTom не нашёл.

Не знаю как вы будете разделять видео по кадрам, тут уже ваши проблемы (гугл в помощь).

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

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

И так, прежде всего я вам советую добавить ваши кадры в отдельную папку. У меня она называется images.

<div id="myTurntable" class="turntable">
    <ul>
        <li data-img-src="images/image1.png"></li>
        <li data-img-src="images/image2.png"></li>
        <li data-img-src="images/image3.png"></li>
        <li data-img-src="images/image4.png"></li>
        <li data-img-src="images/image5.png"></li>
        <li data-img-src="images/image6.png"></li>
        <li data-img-src="images/image7.png"></li>
        <li data-img-src="images/image8.png"></li>
        <li data-img-src="images/image9.png"></li>
        <li data-img-src="images/image10.png"></li>
        <li data-img-src="images/image11.png"></li>
        <li data-img-src="images/image12.png"></li>
        <li data-img-src="images/image13.png"></li>
        <li data-img-src="images/image14.png"></li>
        <li data-img-src="images/image15.png"></li>
        <li data-img-src="images/image16.png"></li>
        <li data-img-src="images/image17.png"></li>
        <li data-img-src="images/image18.png"></li>
        <li data-img-src="images/image19.png"></li>
        <li data-img-src="images/image20.png"></li>
        <li data-img-src="images/image21.png"></li>
        <li data-img-src="images/image22.png"></li>
        <li data-img-src="images/image23.png"></li>
        <li data-img-src="images/image24.png"></li>
        <li data-img-src="images/image25.png"></li>
        <li data-img-src="images/image26.png"></li>
        <li data-img-src="images/image27.png"></li>
        <li data-img-src="images/image1.png"></li>
    </ul>
</div>

Спросите, почему в конце image1.png? Я ожидал, что пройдя до самого конца, плагин перейдет к первому изображению автоматом. Но увы, оказалось не так. Последнее изображение в нашем случае, является фронтальной стороной устройства.

Перед <body> подключим наши .js и после полной прогрузки страницы, выполним скрипт на блок #myTurntable.

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="js/turntable.js"></script>
<script>
    $(document).ready(function(){
            $('#myTurntable').turntable();
    });
</script>

Напомню, что данный плагин не будет работать без jQuery. Так же, не забудьте скачать плагин с официальной страницы Turntable.js.

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

# Демо

Ссылка на скачивание архива с демо jQuery Turntable.js Demo и со всеми кадрами.