Лого SiteHere.ru

Великолепная интерактивная 3D модель

Интерактивная 3D модель jQuery

Флеш уже не такой популярный в наше время, а сайты стали более статичными. Пока все ждут HTML5 поддержки во всех браузерах, а также его элемента canvas. Возможно вы уже видели на некоторых сайтах интерактивные 3D объекты, которые можно крутить мышкой, например, на сайтах интернет-магазинов. И в этом уроке мы создадим такой эффект с помощью изображений и jQuery.

Реальный пример можно увидеть здесь:

Посмотреть примерСкачать(Исправлена ссылка на скачивание)

Также рекомендую посмотреть статью о том как на чистом CSS сделать 3D изображение:



HTML часть

Подключаем две библиотеки(основную библиотеку jQuery и дополнительную interactive_3D.js):

1
2
3
4
5
6
<head>
    ...
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="js/jquery.interactive_3d.js"></script>
    ...
</head>

В HTML коде мы будем использовать лишь один <div> контейнер и начальное изображение:

1
2
3
4
5
6
7
<body>
    ...
    <div id="interactive_3d">
        <img src="images/frame_1.png">
    </div>
    ...
</body>


JS часть

Это основные настройки плагина(interactive_3D.js):

1
2
3
$("#interactive_3d").interactive_3d({
    frames: 30
});

А также ниже находятся все настройки, которые вы можете использовать и изменять:

1
2
3
4
5
6
7
8
9
10
$("#interactive_3d").interactive_3d({
    frames: 10,
    cursor: "move",
    speed: 0,
    entrance: true,
    preloadImages: true,
    touchSupport: true,
    loading: "Загрузка..",
    autoPlay: false
});

Некоторые пояснения по коду:

  • frames — это то количество изображений, которое используется при анимации, по умолчанию 10.
  • cursor — вид курсора при наведении. Полный список можно изучить здесь — CSS cursor property.
  • speed — скорость вращения, по умолчанию равна 0.
  • preloadImages — данный плагин позволяет подгрузить в кэш браузера все изображения до того как пользователь начнет вращать объект.
  • loading — индикатор загрузки, если изображения не загрузились.
  • autoPlay — автопуск, как на 4-ом демо примере.


Вывод

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


Успехов!

Источник: www.onextrapixel.com

8 комментариев к записи
  • Александр

    А также можете сделать необходимое изображение любого предмета и сделать его интерактивное вращение самостоятельно.

    Это каким образом, интересно? Фотографировать не менее 30-40 раз в разных ракурсах?

     
    • Юрий

      Да.

       
      • Александр

        Мне кажется, что эта информация скорее для профессионалов. Вы сами пробовали создать собственную 3d модель, не скопированную из интернета?

         
        • Юрий

          Для профессионалов так для профессионалов, проходите мимо если не разбираетесь или нет желания разобраться.

           
          • Александр

            Не, ну если вы разбираетесь, то покажите свой личный пример.

             
            • Максим

              А свой личный пример они должны новую картинку загрузить ? или как вы это понимаете ? Если вы выдвигаете такую версию она у вас чем подкреплена ? Где вы видели именно такой пример ? или возможно точно такой код ? 

               
          • Сергей

            Юрий, подскажите пожалуйста, можно ли изменить направление вращения? И при достижении последней картинки сделать остановку с возможностью двигать в обратную сторону?

            Для наглядности можете глянуть , что у меня получилось 🙂

             
  • Виктор

    Похоже в скрипте ошибочка есть если поставить autoPlay true и забрать мышку с объекта начинаются пляски, а если false то при загрузке изображения сразу прокручивается 

     

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

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