Трехмерная модель на JQuery
Уроки Трехмерная модель на JQuery
10 января 2016
1590
трехмерная модель, создание трехмерной модели, трехмерные модели на jquery

Трехмерная модель на JQuery

Сложность Рубрика JQuery Браузеры
Демонстрация » Скачать »

Здарова! Праздники это хорошо) но не забываем, что учится чему-то новому не менее важно!)

Все прекрасно знают, что время флеша уже прошло, а время полной интеграции HTML5 в браузеры еще не наступило. Но что делать когда хочется все больше интерактивности, которая не утяжеляла бы сайт, когда хочется воистину крутую фичу на сайт (особенно магазин), к примеру сделать трехмерную модель товара. А я скажу вам) стоит воспользоваться JQuery!

И так начнем!

HTML

<head>
	<meta charset="UTF-8" />
	<title>Трехмерная модель на jQuery | JQuery</title>
	<link rel="stylesheet" type="text/css" href="css/default.css" />
	<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>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/elusive-webfont.css" />
</head>

 

Подключив нужные библиотеки JQuery и стили, создаем единственный блок с ID "my_model", в этом контейнере и будет содержаться наша трехмерная модель.

<div id="my_model" class="interactive_3d">
	<img src="images/frame_1.png">
	<div class="title">
		<h1>Трехмерная модель на jQuery<small>Автозапуск</small></h1>
		<div class="header">
			<div class="menu">
				<a href="index.php">Пример 1</a>
				<a href="index2.php">Пример 2</a>
				<a class="active" href="index3.php">Пример 3</a>
			</div>
		</div>
		<p class="direction"><i class="customicon-move"></i>Зажми и тяни!</p>
	</div>
</div>

 

JS

Код инициализации скрипта, который мы применяем к нашему блоку при помощи ID, здесь ничего сложного.

$(document).ready( function() {
	$("#my_model").interactive_3d({
		frames: 38,
		entrance: false
	});
});

 

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

$("#interactive_3d").interactive_3d({
    frames: 10,
    cursor: "move",
    speed: 0,
    entrance: true,
    preloadImages: true,
    touchSupport: true,
    loading: "Загрузка..",
    autoPlay: false
});

 

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

frames — это то количество изображений, которое используется при анимации, по умолчанию 10.
cursor — вид курсора при наведении. Полный список можно изучить ЗДЕСЬ.
speed — скорость вращения, по умолчанию равна 0.
preloadImages — данный плагин позволяет подгрузить в кэш браузера все изображения до того как пользователь начнет вращать объект.
loading — индикатор загрузки, если изображения не загрузились.
autoPlay — автозапуск, как на примере 3.

 

Итог

Думаю все согласны, что отображение товаров магазина в виде трехмерной модели куда круче смотрится нежели использование кучи фотографий в стандартной галерее. Данный эффект очень легко сделать и как вы смогли заметить ничего сложного в настройке скрипта нет, потому дерзайте!) Ждем появление данного скрипта в Ваших магазинах)

До встречи! Были рады помочь)





Алексей Копча