Как сделать 3D анимацию для сайта?
(044) 391-40-82
Контакты
Главная → Статьи → Как сделать 3D анимацию для сайта?
08.10.2013

Как сделать 3D анимацию для сайта?


Как сделать 3D анимацию для сайта?

Интерфейс сайтов совершенствуется и становится все более привлекательным не только в плане «юзабилити». Веб-ресурсы все чаще используют уникальный дизайн и новые технологии в оформлении. Задача ясна – привлечь пользователей изысканным стилем и современными технологиями.

Среди веб-дизайнеров все чаще становится популярной трехмерная анимация. Особенно удачно она вписывается в презентацию товара или объектов архитектуры. Используют 3D анимацию также для создания уникальных дизайнерских элементов на сайте, для оживления баннеров и так далее.

Если анимацию в формате «gif» используют для создания объектов малого размера из небольшого количества кадров, то flash-технология, по сути, это неограниченная фантазия дизайнера. Тут можно определиться, как сделать 3D анимацию для сайта и создавать анимацию со звуковым сопровождением или ту, которая реагирует на курсор мыши, либо иные манипуляции пользователей.

Основной и простой способ создания 3D анимации

Самый простой способ моделирования трехмерной анимации – создать так называемый «псевдо 3D». Такие картинки можно делать практически в любых популярных редакторах графики: «Adobe Illustrator», «CorelDRAW», «Gimp». Также пригодятся приложения для работы с 3D моделированием. К примеру, «3D Studio Max».

Для начала нужно создать векторную графику, которая станет текстурой, а затем уже обрабатывать и накидывать ее на 3D-форму в той же программе «3D Max». К примеру, можно создать сферу, перейти в редактор материалов, выбрать приглянувшийся шар. Далее в опциях следует открыть закладку «maps», напротив пункта «opacity» выбрать «None», в открывшемся окне выбрать «Bitmap», а затем отыскать нужную текстуру. Установить текстуру можно на «opacity», а затем произвести наложение 3D.

Теперь полученную текстуру можно применить к 3D-сфере. Сначала нужно выделить шар, кликнуть «применить материал к объекту». Чтобы текстура была более четкой и без проблем трассировалась в редакторе векторной графики, необходимо усилить ее. Так, в параметрах текстуры характеристику «Self-illumination» требуется выставить на «100», после чего «рендерить» полученное. С помощью «Rendering» – «Render setup» нужно выставить разрешение и нажать «render». Далее можно сохранить картинку в формате «tiff» или другом формате без сжатия и трассировать (Trace bitmap), переводя изображение в векторную графику, а затем экспериментировать с цветом и прочими настройками.

Помимо вышеперечисленного, есть еще одно решение как сделать 3D анимацию - создать её можно с помощью движка на «javascript», на основе CSS3 или используя «web GL». Также можно поработать и с 3D контекстом элемента HTML5 «canvas».

К недостаткам трехмерной анимации относят высокий порог вхождения. Это достаточно сложное занятие. Научиться самостоятельно моделировать с помощью разных программ для создания 3D графики не так просто. Однако если есть желание серьезно заняться трехмерной анимацией, то стоит изучить такие программы, как «Blender», «3D Studio Max», «Maya», «SketchUp», «Sweet Home 3D», «DAZ Studio» и другие. Но необходимо помнить, что процесс ручного моделирования весьма трудоемкий и занимает много времени.

Создавая 3D анимацию, пользователь должен также учитывать, что сайт не следует слишком перегружать. Анимация, равно как и ее количество, не должны отрицательно влиять на зрительное восприятие посетителя, раздражать, отвлекать от главного.


Вам понравился сайт?

Рассказать друзьям