Tresjs/docs/de/examples/orbit-controls.md

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.

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <TresOrbitControls
      v-if="state.renderer"
      :args="[state.camera, state.renderer?.domElement]"
    />
  </TresCanvas>
</template>

Da OrbitControls eine Referenz zur Kamera und zum Renderer benötigt, musst du diese als Argumente übergeben.

Du kannst das Composable useTres verwenden, um die Kamera und den Renderer zu erhalten.

import { useTres } from '@tresjs/core'

const { state } = useTres()

Dann würde der finale Code etwa so aussehen:

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

extend({ OrbitControls })

const { state } = useTres()
</script>

<template>
  <TresCanvas
    shadows
    alpha
  >
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />
    <TresOrbitControls
      v-if="state.renderer"
      :args="[state.camera, state.renderer?.domElement]"
    />
  </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. 💯

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