Чудова інтерактивна 3d модель

Флеш вже не такий популярний в наш час, а сайти стали більш статичними. Поки всі чекають HTML5 підтримки у всіх браузерах, а також його елемента canvas. Можливо ви вже бачили на деяких сайтах інтерактивні 3D об`єкти, які можна крутити мишкою, наприклад, на сайтах інтернет-магазинів. І в цьому уроці ми створимо такий ефект з допомогою зображень та jQuery.

Реальний приклад можна побачити тут:

Подивитися прімерСкачать(Виправлено посилання на скачування)

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

Відео: Інтерактивна 3D-модель Тадж-Махал

• Об`ємне зображення на CSS

HTML частина

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

123456

lt;headgt; ...lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.interactive_3d.js"gt; lt;/scriptgt; ...lt;/headgt;

Відео: Інтерактивна 3d модель півострова. Студія 3DVector-PRO

В HTML коді ми будемо використовувати лише один контейнер і початкове зображення:

1234567

lt;bodygt; ...lt;div id="Interactive_3d"gt;lt;img src="Images / frame_1.jpg"gt;lt;/divgt; ...lt;/bodygt;

JS частина

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

123

$("# Interactive_3d").interactive_3d({frames: 30})-

А також нижче знаходяться всі настройки, які ви можете використовувати і змінювати:

12345678910

$("# Interactive_3d").interactive_3d({frames: 10,cursor: "Move",speed: 0,entrance: true,preloadImages: true,touchSupport: true,loading: "Завантаження ..",autoPlay: false})-

Деякі пояснення по коду:

Відео: Інтерактивна 3D модель для МНС

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

висновок

Зараз ви можете розмістити цю інтерактивну 3D у себе на сайті. А також можете зробити необхідне зображення будь-якого предмета і зробити його інтерактивне обертання самостійно.

Успіхів!

джерело: onextrapixel.com