Einfache Animationen

Diese Anleitung wird dir helfen, mit grundlegenden Animationen in TresJS zu beginnen.

Wir werden eine einfache Szene mit einem Würfel erstellen. Anschließend animieren wir den Würfel, sodass er sich um die Y- und Z-Achse dreht.

useRenderLoop

Das Composable useRenderLoop ist das Herzstück von Animationen in TresJS. Es ermöglicht dir, eine Funktion zu registrieren, die jedes Mal ausgeführt wird, wenn der Renderer die Szene aktualisiert.

Weitere Informationen zur Funktionsweise gibt es in der Dokumentation von useRenderLoop.

const { onLoop } = useRenderLoop()

onLoop(({ delta, elapsed }) => {
  // wird bei jeder Bildaktualisierung ausgeführt (60FPS, abhängig vom Monitor
})

Eine Referenz zum Würfel bekommen

Um den Würfel zu animieren, benötigen wir eine Referenz via eines Template-Ref. Dazu verwenden wir die ref-Eigenschaft an der TresMesh-Komponente damit wir Zugriff auf die THREE-Instanz bekommen.

Um die Performance zu verbessern, verwenden wir ein Shallow Ref, zum Speichern der Referenz. Warum wir keine reguläre Referenz benutzen, kannst du hier nachlesen.

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

Den Würfel animieren

Jetzt, wo wir eine Referenz zum Würfel haben, können wir ihn animieren. Wir werden den onLoop-Callback verwenden, um die Rotation des Würfels zu aktualisieren.

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

Du kannst auch das delta der internen Uhr von THREE oder elapsed nutzen, um den Würfel zu animieren.

Aber warum nicht die Reaktivität nutzen?

Du fragst dich vielleicht, warum wir keine Reaktivität nutzen, um den Würfel zu animieren. Die Antwort ist einfach: Performance.

// Das ist keine gute 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>

Als Vue Entwickler mag es intiuitiv scheinen, Reaktivität zu nutzen, um den Würfel zu animieren, aber das wäre eine schlechte Idee. Der Grund ist, dass die Reaktivität von Vue auf Proxies basiert und nicht dafür ausgelegt ist, in einem Render-Loop verwendet zu werden, der 60 oder mehr Mal pro Sekunde ausgeführt wird.

Die unten eingebettete Seite zeigt den Performancestest eines Proxy im Vergleich zu einem regulären Objekt. Wie du sehen kannst, ist der Proxy 5 Mal langsamer als das reguläre Objekt.

Mehr darüber kannst du im Abschnitt Caveats lesen.