Всем привет! В этом материале рассмотрим, как сделать 3D модель объекта на javascript .
Всем привет! В этом материале рассмотрим, как сделать 3D модель объекта на javascript.
Конечно, делать настоящую 3D модель мы не будем. Это займет много времени, да и в большинстве случаев не нужно.
Думаю, вы часто могли видеть на сайтах разных интернет-магазинов товары, которые можно "крутить" мышкой и тем самым рассмотреть со всех сторон. Сегодня сделаем что-то похожее.
Для решения данной задачи лучше всего использовать готовое, легковесное решение – turntable.js.
Turntable.js – библиотека, которая позволяет из нескольких картинок сделать одну модель, которую можно вращать.
Плюсы этой библиотеки в том, что она легковесная, отзывчивая, легка в установке и настройке.
Чтобы посмотреть демонстрацию, перейдите на официальный сайт. Там же вы можете найти подробную информацию о библиотеке.
Установка
Вы можете подключить библиотеку в ваш javascript файл или внизу html страницы. Далее, создайте структуру следующего вида:
<div id="myTurntable" class="turntable">
<ul>
<li data-img-src="images/myPic1.jpg"></li>
<li data-img-src="images/myPic2.jpg"></li>
<li data-img-src="images/myPic3.jpg"></li>
<li data-img-src="images/myPic4.jpg"></li>
<li data-img-src="images/myPic5.jpg"></li>
<li data-img-src="images/myPic6.jpg"></li>
<li data-img-src="images/myPic7.jpg"></li>
<li data-img-src="images/myPic8.jpg"></li>
<li data-img-src="images/myPic9.jpg"></li>
<li data-img-src="images/myPic10.jpg"></li>
<li data-img-src="images/myPic11.jpg"></li>
<li data-img-src="images/myPic12.jpg"></li>
<li data-img-src="images/myPic13.jpg"></li>
<li data-img-src="images/myPic14.jpg"></li>
</ul>
</div>
Укажите нужные пути для картинок с разных ракурсов в атрибуте data-img-src.
Также, не забудьте подключить css файл.
.turntable {
margin: 0px;
}
.turntable ul {
padding: 0px;
margin: 0px;
}
.turntable ul li {
list-style-type: none;
display: none;
}
.turntable ul li img {
width: 100%;
}
.turntable ul li.active {
display: block;
}
Запустить библиотеку очень просто:
$('#myTurntable').turntable();
Используйте данный способ в своих проектах, а у меня на этом все. Спасибо за внимание!
