Animations Flashcards
Como funciona uma animação no Three.js?
Como stop motion: atualiza objetos, renderiza a cena, repete.
O que faz o método requestAnimationFrame?
Chama uma função no próximo frame.
Como criar um loop de animação usando requestAnimationFrame?
A função se chama recursivamente dentro de si mesma.
Onde deve estar o renderer.render(…) no loop?
Dentro da função tick, sendo chamado a cada frame.
Por que usar deltaTime em animações?
Para manter a mesma velocidade em máquinas com FPS diferentes.
Como calcular o deltaTime com Date.now()?
Subtraindo o tempo atual do tempo anterior.
Como usar deltaTime para rotacionar um objeto?
mesh.rotation.y += velocidade * deltaTime
O que faz clock.getElapsedTime()?
Retorna o tempo em segundos desde que o clock foi criado.
Como rotacionar um objeto com elapsedTime?
mesh.rotation.y = elapsedTime
Como mover um objeto em círculo com elapsedTime?
Usando Math.cos(elapsedTime) e Math.sin(elapsedTime) para position.
Como mover a câmera em círculo ao redor de um objeto?
camera.position.x = Math.cos(elapsedTime); camera.lookAt(mesh.position)
O que faz clock.getDelta()?
Retorna o tempo entre o frame atual e o anterior, não recomendado.
Para que serve a biblioteca GSAP?
Criar animações complexas com facilidade.
Como importar o GSAP?
import gsap from ‘gsap’
Como criar uma animação com GSAP?
gsap.to(mesh.position, { duration: 1, delay: 1, x: 2 })
O GSAP renderiza automaticamente a cena?
Não. Ainda é necessário chamar renderer.render no tick().
