OrbitControls

OrbitControls ist ein Kamerasteuerungselement, das es dir ermöglicht, die Kamera frei um einen zentralen Punkt herum zu bewegen. Es ist eine großartige Möglichkeit, deine Szene zu erkunden. Allerdings sind OrbitControls kein Teil des Cores von Three.js. Daher müsstest du es aus dem Modul three/addons/controls/OrbitControls importieren.

TresJS erstellt automatisch einen Katalog aus dem Core von Three, damit du sie als Komponenten nutzen kannst. Allerdings ist standardmäßig TextGeometry nicht Teil dieses Katalogs.

Glücklicherweise bietet TresJS eine Möglichkeit, den Komponentenkatalog mit der extend-Methode zu erweitern.

Für weitere Informationen darüber, wie du deinen TresJS-Katalog erweitern kannst, siehe den Abschnitt Erweitern.

Verwendung von OrbitControls

Um OrbitControls zu verwenden, musst du sie aus dem Modul three/addons/controls/OrbitControls importieren.

import { OrbitControls } from 'three/addons/controls/OrbitControls'

Danach musst du den Komponentenkatalog mit der extend-Methode erweitern.

import { extend } from '@tresjs/core'
import { OrbitControls } from 'three/addons/controls/OrbitControls'

extend({ OrbitControls })

Jetzt kannst du die Komponente TresOrbitControls in deiner Szene verwenden.

OrbitControls.vue

<template>
  <TresOrbitControls
    v-if="renderer"
    :args="[camera, renderer?.domElement]"
  />
</template>

Da OrbitControls eine Referenz zur Kamera und zum Renderer benötigen, musst du diese als Argumente übergeben. Du kannst das Composable useTresContext verwenden, um die Kamera und den Renderer zu erhalten.

WARNING

useTresContext kann nur innerhalb eines TresCanvas verwendet werden, da TresCanvas die Kontext-Daten bereitstellt. Deshalb haben wir eine Unterkomponente namens OrbitControls.vue implementiert. Erfahre mehr über context.

import { useTres } from '@tresjs/core'

const { state } = useTres()

Dann würde der finale Code etwa so aussehen:

OrbitControls.vue

<script setup lang="ts">
import { extend, useTresContext } from '@tresjs/core'
import { OrbitControls } from 'three/addons/controls/OrbitControls'

extend({ OrbitControls })

const { camera, renderer } = useTresContext()
</script>

<template>
  <TresOrbitControls
    v-if="renderer"
    :args="[camera, renderer?.domElement]"
  />
</template>

App.vue

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

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <OrbitControls />
    <TresGridHelper :args="[10, 10]" />
  </TresCanvas>
</template>

OrbitControls von cientos

Jetzt wird es interessant. ✨ Das Paket cientos bietet eine Komponente namens <OrbitControls />, die ein Wrapper für die OrbitControls aus dem Modul three-stdlib ist.

Das Beste daran? Du musst den Katalog nicht erweitern oder irgendwelche Argumente übergeben. Es funktioniert einfach. 💯

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

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <OrbitControls />
  </TresCanvas>
</template>