Проектирование и дизайн ИС Практическая работа №25

Практическое занятие №25

Цель работы: Создание 3D анимированных моделей

Приобретаемые умения и навыки: Умение работать с СSS

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet

В данном уроке мы рассмотрим способ создания 3D анимированных моделей с использованием CSS. Такой тип анимированных моделей будет полезен чтобы привлечь внимания посетителей к вашему сайту. Создание сайтов в 3D-стилистике подходит для разных ниш, в зависимости от способа реализации и конечной цели владельца страницы:

1. Трёхмерные иллюстрации продукта подойдут для современного интернет-магазина или лендинга. Благодаря тому, что потенциальный клиент сможет ближе познакомиться с продуктом, конверсионность страницы повысится;

2. Ролики в формате моушен-дизайна отлично впишутся в люксовые ниши: дорогие автомобили, часы, украшения. Нестандартные промо-видео подойдут страницам с креативным направлением: например, создателям видеоигр или пиар-агентствам;

3. 3D-рендеринг и виртуальная экскурсия актуальны для страниц, предлагающих недвижимость или сайтов-портфолио архитекторов. В обоих случаях повысится конверсионность сайта: пользователи быстрее примут решение о покупке, аренде помещения или выборе специалиста.

Ход работы

Файл HTML

Мы создадим HTML файл в который добавим кнопки управления нашей 3D-модели и div-контейнеры которые будут отвечать за нашу 3D-модель. Как видно из рисунка выше наша 3D модель состоит из кнопок управления которые отвечают за поорот нашей модели в пространстве и соответственно самой модели которая состоит из девяти квадратов разного цвета.

Первое что мы сделаем это создадим кнопки для нашей панели управления. Кнопок управления у нас будет 5 штук, 4 будут отвечать за поворот, а пятая будет отвечать за сброс (приведение к исходному состоянию нашей модели).

Кнопка управления в левую сторону:

Кнопка сброса:

Аналогичным способом добавьте еще три кнопки управления как показано в первом примере.

Далее мы создадим контейнеры для нашей модели. Мы создадим главные контейнер с классом perspective. В этом контейнере будут находиться 9 одинаковых контейнеров с классом cube.

Если мы запустим HTML файл то выглядеть он будет так:

У нас буду отображаться только наши кнопки.

Файл CSS

Теперь давайте займемся CSS! Для начала мы создадим площадку, где будет располагаться наша 3D модель:

Если мы посмотрим на результат, то мы увидим это

Дальше мы займемся отрисовкой нашей модели. Для начала мы разметим место от куда мы начнем создавать нашу 3D модель

Результат будет следующим.

Следующим шагом будет создание верха нашей модели:

Результат будет следующим.

Далее мы займемся отрисовкой левых сторон нашей модели:

Результат будет следующим.

Далее мы отрисуем правые стороны нашей модели:

Результат будет следующим.

Дальше мы закрасим наши кубы (через один) и боковые стороны для большего эффекта

Результат будет следующим.

Создание анимации.

Теперь давайте займемся анимацией нашей модели. Обратите внимание что наша модель состоит из 9 кубов, соответственно анимацию мы будем задавать для каждого куба отдельно!

Если вы все правильно сделали то ваша модель будет двигаться. Двигаться должны все кубы!

Панель управления.

Теперь давайте займемся оформлением нашей панель управления. Для начала мы изменим их дизайн, чтобы они выглядели более симпатично!

Результат будет следующим.

Последним шагом будет то, что мы зададим функционал нашим кнопкам, которые будут отвечать за поворот нашей модели.

Готово! Наша панель функционирует! И теперь мы можем поворачивая нашу модель рассмотреть ее под разными углами!

Контрольные вопросы:

1. Что такое 3D-трансформации в CSS и какие основные функции используются для их создания? 

2. Какую HTML-структуру необходимо создать для 3D-модели?