Basis Animaties

Deze gids helpt je op weg met basisanimaties in TresJS.

We zullen een eenvoudige scène bouwen met een kubus. Vervolgens zullen we de kubus animeren om rond de Y- en Z-as te roteren.

useRenderLoop

De composable useRenderLoop is de kern van TresJS-animaties. Hiermee kunt u een callback registreren die wordt aangeroepen telkens wanneer de renderer de scène bijwerkt met de refresh rate van de browser.

Voor een gedetailleerde uitleg over hoe het werkt, raadpleegt u de documentatie useRenderLoop.

const { onLoop } = useRenderLoop()

onLoop(({ delta, elapsed }) => {
  // Ik run elke frame op ~ 60FPS (depending of your monitor)
})

De reference naar de kubus verkrijgen

Om de kubus te animeren, moeten we er een reference naar krijgen. We kunnen dit doen door een Template Ref door te geven met behulp van de ref prop aan de TresMesh component. Hiermee wordt de THREE-instantie returned.

Om de prestaties te verbeteren, zullen we een Shallow Ref gebruiken om de referentie op te slaan in plaats van een gewone Ref. Ontdek [hier] waarom (../advanced/caveats.md#reactivity)

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

De kubus animeren

Nu we een verwijzing naar de kubus hebben, kunnen we deze animeren. We zullen de onLoop callback gebruiken om de rotatie van de kubus bij te werken.

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

Je kan ook de delta van de interne THREE clock gebruiken of de elapsed om de kubus te animeren.

Maar waarom gebruiken we geen reactiviteit?

Je vraagt je misschien af waarom we geen reactiviteit gebruiken om de kubus te animeren. Het antwoord is simpel: prestaties.

// Dit is een slecht idee ❌
<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>

We kunnen in de verleiding komen om reactiviteit te gebruiken om de kubus te animeren. Maar het zou een slecht idee zijn. De reden is dat Vue's reactivity is gebaseerd op Proxies en niet is ontworpen om te worden gebruikt in een render loop die 60 of meer keer per seconde wordt bijgewerkt.

De onderstaande ingesloten pagina toont de benchmark van een proxy versus een gewoon object. Zoals u kunt zien, is de proxy 5 keer langzamer dan het reguliere object.

U kunt hier meer over lezen in de sectie Caveats.