Ноябрь 29, 2015 Запись была обновлена
Великолепная интерактивная 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
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Это каким образом, интересно? Фотографировать не менее 30-40 раз в разных ракурсах?
Да.
Мне кажется, что эта информация скорее для профессионалов. Вы сами пробовали создать собственную 3d модель, не скопированную из интернета?
Для профессионалов так для профессионалов, проходите мимо если не разбираетесь или нет желания разобраться.
Не, ну если вы разбираетесь, то покажите свой личный пример.
А свой личный пример они должны новую картинку загрузить ? или как вы это понимаете ? Если вы выдвигаете такую версию она у вас чем подкреплена ? Где вы видели именно такой пример ? или возможно точно такой код ?
Юрий, подскажите пожалуйста, можно ли изменить направление вращения? И при достижении последней картинки сделать остановку с возможностью двигать в обратную сторону?
Для наглядности можете глянуть , что у меня получилось 🙂
Похоже в скрипте ошибочка есть если поставить autoPlay true и забрать мышку с объекта начинаются пляски, а если false то при загрузке изображения сразу прокручивается