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

Animaciones Básicas

Esta guía te ayudará a empezar con las animación en TresJs.

Vamos a construir una escena sencilla con un simple cubo y animarlo en los ejes Y y Z.

useRenderLoop

El useRenderLoop composable es el core de las animaciones en TresJs. Te permite registrar un callback que se llamará cada en cada frame.

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

const { onLoop, resume } = useRenderLoop()

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

Referenciando al cubo

Para animar el cubo, necesitamos usar una referencia. Podemos hacer eso al pasar un Template Ref usando ref prop al TresMesh componente. Eso volverá la instancia THREE.

Para mejorar el rendimiento, usaremos un Shallow Ref para almacenar la referencia en lugar de un Ref regular. Mas información 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>

Girar el cubo

Ahora que tenemos una referencia 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
  }
})

Puedes usar el delta THREE clock o el elapsed para animar el cubo.

¿Pero porque no usar la reactividad de vue?

la respuesta es simple, rendimiento

// Esto es una mala idea ❌
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'

const boxRotation = reactive([0, 0, 0])

onLoop(({ delta, elapsed }) => {
  boxRotation[1] += delta
  boxRotation[2] = elapsed * 0.2
})
</script>

Podríamos sentirnos tentados a usar la reactividad de VueJs para animar el cubo. Pero eso sería una mala idea, esta es la razón Vue's reactivity is based on Proxies. Los proxies no están diseñados para ser usados en el renderloop que se actualiza cada 60 frames por segundo o mas

Adjuntamos los benchmark sobre este caso benchmark of a proxy vs a regular object. Como puedes ver los proxies son 5 veces mas lentos que objetos normales

Puedes leer a detalle aquí Caveats.