Анимация 3D моделей в Three.js с GSAP

Этот урок посвящен анимации трёхмерных объектов с помощью библиотеки GSAP (GreenSock Animation Platform). Ранее использовалась функция Animate, но GSAP позволяет создавать более сложные анимации.

Подключение GSAP

Для использования GSAP подключите её к проекту. Рекомендуется использовать CDN. Найдите GSAP на сайте CDN (например, jsdelivr) и скопируйте код подключения. Вставьте его в файл index.html перед подключением index.js. Обычно достаточно тега <script> с атрибутом src, указывающим путь к библиотеке.

Анимация куба с помощью GSAP

В файле index.js добавим код для анимации куба. Создадим комментарий GSAP для обозначения блока кода анимации. Далее, используем GSAP для анимации позиции куба:

// GSAP
gsap.to(cube.position, {
    y: 2,
    x: 1,
    duration: 1,
    ease: "power1.inOut",
    repeat: -1, // Бесконечное повторение
    yoyo: true // Возвращение в исходное положение
});

Описание кода:

• gsap.to() запускает анимацию.
• cube.position — анимируемый объект (позиция куба).
• { y: 2, x: 1 } — изменение координат по осям Y и X.
• duration: 1 — длительность анимации (1 секунда).
• ease: "power1.inOut" — тип анимации (ускорение и замедление).
• repeat: -1 — бесконечное повторение анимации.
• yoyo: true — эффект «маятника» (возвращение в исходное положение).

Этот код создаёт анимацию, где куб постоянно движется вверх и вправо, с эффектом ускорения и замедления, и возвращается в исходное положение. Аналогично можно анимировать вращение, масштаб и другие свойства объектов.

Взаимодействие с пользователем: подсветка и анимация при наведении

Добавим подсветку объекта при наведении курсора мыши и соответствующую анимацию.

Удалим или закомментируем предыдущую анимацию. Создадим функцию onMouseMove для получения координат мыши. В функции animate будем использовать функцию intersectObject для проверки пересечения курсора с объектом.

Создадим два материала: originalMaterial (красный цвет) и highlightMaterial (белый цвет с emissive).

const originalMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const highlightMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffffff, emissiveIntensity: 0.5 });

// ... (код создания куба с использованием originalMaterial) ...

function onMouseMove(event) {
    // ... (код получения координат мыши) ...
}


function animate() {
    // ...
    if (intersectObject) { // предполагается, что переменная intersectObject определена ранее
        if (!isHovered) {
            cube.material = highlightMaterial;
            isHovered = true;
            gsap.to(cube.scale, { x: 1.5, y: 1.5, z: 1.5, duration: 1.5, ease: "power1.out" }); // Добавлена z-координата для масштабирования по всем осям
        }
    } else {
        cube.material = originalMaterial;
        isHovered = false;
        gsap.to(cube.scale, { x: 1, y: 1, z: 1, duration: 1.5, ease: "power1.out" }); // Добавлена z-координата для возвращения к исходному масштабу
    }
    // ...
}

let isHovered = false;

Теперь при наведении курсора на куб, его материал меняется на highlightMaterial (белый, светящийся), и он увеличивается в размерах. При убирании курсора, материал и размер возвращаются к исходным значениям.

В этом уроке мы создали сложные анимации в Three.js с помощью GSAP и реализовали интерактивное взаимодействие пользователя с объектом, добавляя анимацию и изменение внешнего вида при наведении курсора. Это позволяет создавать более привлекательные и динамичные трёхмерные сцены.