Анимированный эффект взаимодействия на GSAPCегодня мы хотим показать наглядное пособие о том, как воссоздать эффект интерактивного взаимодействия-отталкивания элементов сетки, которые можно увидеть в фильме BestServedBold Dribbble «Голографические взаимодействия». Из этого урока вы узнаете, как создать такой эффект для сетки элементов с использованием three.js и TweenMax (GSAP). мы предполагаем, что у вас уже есть базовые знания JavaScript и three.js. Ведь чтобы понять все задуманное, вы определенно в этом должны разбираться и понимать суть. Если вы не знакомы с этим..

 

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

Основная концепция

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

Анимированный эффект взаимодействия на GSAP

Чем ближе мышь к элементу, тем большим он будет казаться.

Анимированный эффект взаимодействия на GSAP 2

Мы также определяем радиус, затрагивая только один элемент или любое количество элементов внутри этого радиуса. Чем больше радиус, тем больше элементов будет реагировать при перемещении мыши.

Анимированный эффект взаимодействия на GSAP 3

Начинаем

Сначала мы должны настроить нашу HTML-страницу для демонстрации. Это простой шаблон, так как весь код будет выполняться внутри элемента canvas:

Как вы можете видеть, мы также подключили three.js и TweenMax из CDN (будет видно в коде демок).

Вспомогательные функции

Давайте определим некоторые вспомогательные функции для вычисления расстояния между двумя точками, отображения значений и преобразования градусов в радианы:

Элементы сетки

Прежде чем строить нашу сетку, нам нужно определить объекты, которые мы будем использовать:

Box:

Cone:

Torus:

Настройка 3D-мира

Внутри нашего основного класса мы создаем функцию для настройки:

Обработчик перемещения мыши

Создание 3D-сцены

Камера

Теперь давайте добавим камеру для нашей сцены:

Помощник случайных объектов

Мы хотим случайным образом размещать различные прямоугольники, конусы и объекты, поэтому мы создаем маленького помощника:

Помощник по сетке

Это всего лишь маленький помощник для создания сетки на основе геометрии и материала:

Сетка

Теперь мы собираемся разместить эти случайные элементы в сетке:

Анимированный эффект взаимодействия на GSAP 5

Окружающий свет

Далее мы добавим рассеянный свет, чтобы придать приятный цветовой эффект:

Анимированный эффект взаимодействия на GSAP 6

Прожектор

Мы также добавляем SpotLight к сцене для реалистичного освещения:

Анимированный эффект взаимодействия на GSAP 7

RectArea Light

Для рассеивания равномерного света мы используем RectAreaLight:

Анимированный эффект взаимодействия на GSAP 8

Point Lights

И для окончательных световых эффектов мы создаем функцию PointLight, чтобы добавить столько света, сколько мы хотим:

Draw / Animate Elements

Это функция, где обрабатываются все анимации; она будет вызываться в каждом кадре внутри requestAnimationFrame:

И это все! Здесь гораздо больше возможностей, например, добавление большего количества объектов и т.д. Посмотрите на следующий вариант сетки:

Анимированный эффект взаимодействия на GSAP 10

..или вариант поворота камеры:

Анимированный эффект взаимодействия на GSAP 11

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