Como criar animações 3D interativas com Three.js e GSAP?

Animações 3D na web já não são novidade, mas a combinação de bibliotecas como Three.js e GSAP nos permite criar experiências visuais interativas e fluidas que impressionam qualquer usuário. O Three.js simplifica a criação e o gerenciamento de cenas 3D no navegador, enquanto o GSAP fornece uma API robusta para animações altamente performáticas.

Neste artigo, vamos explorar como integrar Three.js e GSAP para criar uma cena 3D básica com animações interativas. Vamos criar uma esfera que gira e reage ao movimento do mouse, combinando elementos essenciais das duas bibliotecas.

Pré-requisitos

Antes de começarmos, certifique-se de que você tenha o ambiente configurado: Three.js e GSAP instalados:

npm install three gsap

Ou, inclua as CDN no HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

Criando o Cenário Básico com Three.js

Primeiro, vamos configurar o ambiente 3D básico com Three.js: uma cena, uma câmera e um renderizador.

Passo 1: Configurando a Cena

import * as THREE from 'three';

// Criando a cena
const scene = new THREE.Scene();

// Criando a câmera (campo de visão, proporção, plano próximo, plano distante)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;  // Distanciando a câmera para visualizar os objetos

// Configurando o renderizador
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

Neste ponto, temos uma cena simples renderizada, mas sem objetos ou animações.

Passo 2: Adicionando um Objeto 3D

Vamos adicionar um cubo 3D para animarmos:

// Criando a geometria do cubo e o material
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// Adicionando o cubo à cena
scene.add(cube); 

Passo 3: Renderizando o Objeto

Agora, precisamos de uma função que renderize a cena continuamente:

function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();

Com isso, temos um cubo verde estático na tela. Agora, vamos fazer mágica com o GSAP.

Animando o Cubo com GSAP

A biblioteca GSAP facilita a criação de animações declarativas. Vamos animar a rotação e a posição do cubo de forma suave.

Passo 4: Adicionando Animação de Rotação

// Animando a rotação do cubo no eixo Y e X
gsap.to(cube.rotation, { duration: 2, x: Math.PI * 2, y: Math.PI * 2, repeat: -1, ease: "power1.inOut" });

Aqui, estamos rotacionando o cubo no eixo X e Y, fazendo uma volta completa (2π radianos) repetidamente (repeat: -1 faz a animação repetir infinitamente). A função ease define a suavidade da animação.

Passo 5: Animando a Posição com Interação

Podemos adicionar um pouco de interatividade, animando a posição do cubo quando o usuário clicar na tela.

window.addEventListener('click', () => {
gsap.to(cube.position, { duration: 1, x: (Math.random() - 0.5) * 10, y: (Math.random() - 0.5) * 10 });
});

Agora, sempre que o usuário clicar na tela, o cubo se moverá aleatoriamente no espaço 3D. O Math.random() gera um número entre 0 e 1, então ajustamos o intervalo para que o cubo se mova para posições variáveis.

Adicionando Luz para um Visual Mais Atraente

Podemos melhorar o visual do cubo adicionando luz à cena, tornando o material mais realista:

// Mudando o material para responder à luz
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });

// Adicionando luz à cena
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(10, 10, 10);
scene.add(light);

Agora, o cubo terá sombras e iluminação adequada, tornando-o visualmente mais interessante.

Animação Complexa: Mover e Girar com GSAP

Vamos fazer uma animação mais complexa, movimentando e rotacionando o cubo simultaneamente.

// Animação combinada de posição e rotação
gsap.to(cube.position, { duration: 2, x: 3, y: 3, ease: "bounce.out" });
gsap.to(cube.rotation, { duration: 2, z: Math.PI, ease: "power1.inOut" });

Aqui, usamos um ease de tipo "bounce" para a posição, que dá uma animação divertida como se o cubo estivesse "pulando". Para a rotação, aplicamos uma suavização mais simples.

Combinar Three.js e GSAP oferece um enorme potencial para criar animações 3D interativas com bastante fluidez e controle. O Three.js cuida da parte gráfica, enquanto o GSAP lida com as animações, fornecendo transições suaves e flexíveis. Com essas duas ferramentas, você pode criar desde simples objetos animados até experiências 3D complexas e interativas.

A partir deste exemplo básico, você pode expandir para projetos mais elaborados, como animações em resposta a eventos de usuário, criação de interfaces 3D dinâmicas e muito mais. Aproveite o poder dessas ferramentas e leve suas animações 3D para o próximo nível!