Animations de bases

Ce guide vous aidera à démarrer avec les animations de base dans TresJS.

Nous allons construire une scène simple avec un cube. Nous animerons ensuite le cube pour qu'il tourne autour des axes Y et Z.

useRenderLoop

Le composable useRenderLoop est le cœur des animations dans TresJS. Vous permet d'enregistrer une fonction de rappel qui sera exécutée chaque fois que le moteur de rendu met à jour la scène à la fréquence de rafraîchissement du navigateur.

Pour une explication détaillée de son fonctionnement, consultez la documentation de useRenderLoop.

const { onLoop } = useRenderLoop()

onLoop(({ delta, elapsed }) => {
  // ~60FPS (Dépend de votre moniteur)
})

Donner la référence au cube

Pour animer le cube, nous devons lui donner une référence. Nous pouvons le faire en passant un Template Reference en utilisant la propriété ref dans le composant TresMesh. Cela renverra l’instance de THREE.

Pour améliorer les performances, nous utiliserons une Shallow Reference pour stocker la référence au lieu d'une référence régulière. Vous pouvez voir pourquoi ici

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'

const boxRef: ShallowRef<TresInstance | null> = shallowRef(null)
</script>

<template>
  <TresCanvas>
    <TresMesh
      ref="boxRef"
      :scale="1"
    >
      <TresBoxGeometry :args="[1, 1, 1]" />
      <TresMeshNormalMaterial />
    </TresMesh>
  </TresCanvas>
</template>

Animer le cube

Maintenant que nous avons une référence au cube, nous pouvons l'animer. Nous utiliserons le rappel onLoop pour mettre à jour la rotation du cube.

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

Vous pouvez également utiliser delta de horloge interne de THREE ou elapsed pour animer le cube.

Mais pourquoi ne pas utiliser la réactivité ?

Vous vous demandez peut-être pourquoi nous n'utilisons pas la réactivité pour animer le cube. La réponse est simple : la performance.

// 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>

On peut être tenté d'utiliser la réactivité pour animer le cube. Mais ce serait une mauvaise idée. La raison en est que la réactivité de Vue est basée sur des proxys et n'est pas conçue pour être utilisée dans une boucle de rendu qui se met à jour 60 fois ou plus par seconde.

La page intégrée ci-dessous montre le test de performances d'un proxy par rapport à un objet standard. Comme vous pouvez le constater, le proxy est 5 fois plus lent que l'objet standard.

Vous pouvez en savoir plus à ce sujet dans la section de Mise en garde.