X
Юрий Немец

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

Флеш уже не такой популярный в наше время, а сайты стали более статичными. Пока все ждут 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

Категории: jQuery