Картинка 360 градусов на JavaScript

Картинка 360 градусов на JavaScript

Недавно я писал статью про поворотный стол, с помощью которого хотел снимать короткие видео прототипов и готовых устройств. На видео можно будет осмотреть предмет со всех сторон, это удобней, чем просто фотография. Идея не плохая, но появилась, как мне кажется, более интересная – реализовать фотографию с обзором в 360, где пользователь сам сможет повращать изображение с помощью мышки. Такой подход позволит вращать картинку в любом направлении, с удобной скоростью и возможностью останавливаться в любой момент. Чтобы реализовать возможность такого просмотра я написал маленький jQuery плагин на JavaScript.

Как вращается картинка 360 градусов?

Прежде чем разбирать плагин, нужно понять, как вообще будет работать отображение картинки с обзором в 360 градусов. Тут все просто, в первую очередь нужно сделать несколько фотографий с одного ракурса, только каждый раз должен происходить небольшой поворот объекта. Так же можно сделать видеозапись полного оборота платформы, на которой лежит предмет, а потом разбить видео по кадрам. Способ с видео мне показался проще, поэтому им я и воспользовался, снял 15-секундное видео и разбил его на 50 кадров, где каждый кадр – это отдельная картинка.
Далее нужно с помощью JavaScript по очереди показывать фотки, так создастся впечатление поворота предмета на изображении. Смену фотографий можно осуществлять при клике на какие-нибудь кнопки, при скролле или перемещении ползунков. А можно немного «заморочиться» и сделать управление мышью, чем я и занялся. Получилось добиться эффекта поворота при зажатой кнопке мыши и перетаскивания курсора влево или вправо.

Реализация вращения картинки 360 градусов с помощью JavaScript

Первым делом необходимо отлавливать все события мыши над картинкой. Самые интересные события в данном случае, это mousedown, mouseup и mousemove. Событие mousedown будет давать старт к анимации, при mousemove нужно отловить движение мыши в лево и вправо, а также выполнять смену фоток, что и будет создавать эффект 360 градусов. И не забыть остановить анимацию по событию mouseup.
Для корректной работы кода на телефонах, необходимо обработать тач-события: touchstart, touchend и touchmove. А также в мобильной версии немного по-другому происходит получение координат курсора, расположенного над элементом. Если на десктопе получить координату можно с помощью такого кода:

$element.bind('mousemove', function (e) { 
    var position_X = e.pageX;
});

то для телефонов с тач-событиями код немного изменится, получится вот так:

$element.bind('touchmove', function (e) { 
    var touch = e.originalEvent.touches[0];
    var position_X = touch.pageX;
});

Чтобы понять в какую сторону движется курсор нужно запоминать прошлое положение и при каждом новом смещении сравнивать координаты, если положении курсора по оси X стало ближе к нулю, то становится понятно направление – влево, в противном случае понимаем, что мышь сдвинули вправо.
Из интересного в коде больше ни чего нет – одна математика. Если кому-то интересно можете посмотреть в коде плагина, его можно скачать тут.

Послесловие

Плагин еще совсем «сырой», толком не тестировался – только на нескольких браузерах десктопа и мобильных устройствах с androind 4.4 и ios 10.3. Поэтому если вы вдруг заметите ошибки, то присылайте их в комментарии, я постараюсь подправить плагин.
Исходники с примером можно скачать тут.
Чтобы было понятней, что получилось, ниже приведен пример работы плагина. Картинку можно вращать, если зажать курсорам и начать шевелить влево-вправо. Изображение немного дергается, но это из-за того, что я снимал трясущимися, как у закоренелого алкоголика или людоеда, руками. Следующий раз попробую снять видео с помощью зафиксированного телефона.

Рассказать друзьям:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*