Tresjs/docs/es/examples/basic-animations.md

Animaciones Básicas

Esta guía te ayudará a empezar con animación básica en TresJS.

Vamos a construir una escena sencilla con un cubo simple. Pués animarmos el cubo para girar de ejes Y y Z.

useRenderLoop

El useRenderLoop composable es el core de TresJS animaciones. Te permites registrar un callback que se llamará cada vez el renderer actualiza la escena con el ritmo de actualizar del navegador.

Para ver una explanación en detalle de como funciona, por favor consulta al useRenderLoop documentación.

const { onLoop, resume } = useRenderLoop()

resume()
onLoop(({ _delta, elapsed }) => {
  // Operará a cada frame ~ 60FPS (depende de tu pantalla)
})

Traer la referencia al cubo

Para animar el cubo, a lo necesitamos traer una referencia. Podemos hacer eso por pasar un Template Ref usando ref prop al TresMesh componente. Eso volverá el THREE instance.

Para mejorar el rendimiento, usaremos un Shallow Ref to store la referencia en lugar de un Ref regular. Ve porque aquí

<script setup lang="ts">
const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
</script>

<template>
  <TresMesh ref="boxRef" :scale="1" cast-shadow>
    <TresBoxGeometry :args="[1, 1, 1]" />
    <TresMeshStandardMaterial v-bind="pbrTexture" />
  </TresMesh>
</template>

Animar el cubo

Ahora que tenemos una referecia al cubo, podemos animarlo. Usaremos el onLoop callback para actualizar la rotación del cubo.

onLoop(({ _delta, elapsed }) => {
  if (boxRef.value) {
    boxRef.value.rotation.y += 0.01
    boxRef.value.rotation.z = elapsed * 0.2
  }
})

También puedes usar el delta de la internal THREE clock o el elapsed para animar el cubo.