OrbitControls

OrbitControls est un contrôleur de caméra qui vous permet d'orbiter autour d'une cible. C'est une excellente façon d'explorer votre scène.

Cependant, cela ne fait pas partie du cœur de ThreeJS. Par conséquent, pour l'utiliser, vous devrez l'importer depuis le module three/addons/controls/OrbitControls.

Cela crée un problème car TresJS crée automatiquement un catalogue du cœur de ThreeJS afin que vous puissiez les utiliser comme composants.

Heureusement, TresJS offre un moyen d'étendre le catalogue de composants. Vous pouvez le faire en utilisant la méthode extend de la bibliothèque principale.

Pour plus d'informations sur la façon d'étendre votre catalogue TresJS, consultez la section extension.

Usage de OrbitControls

Pour utiliser OrbitControls, vous devez d'abord importer le module three/addons/controls/OrbitControls.

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

Ensuite, vous devez étendre le catalogue de composants à l'aide de la méthode extend.

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

extend({ OrbitControls })

Vous pouvez maintenant utiliser le composant TresOrbitControls dans votre scène.

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

Étant donné que OrbitControls a besoin d'une référence à la caméra et au moteur de rendu, vous devez les transmettre comme arguments.

Vous pouvez utiliser le composable useTres pour obtenir la caméra et le moteur de rendu.

import { useTres } from '@tresjs/core'

const { state } = useTres()

Le code final ressemblerait donc à ceci :

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

C’est là que commence la partie intéressante. ✨ Le package cientos fournit un composant appelé <OrbitControls /> qui est un wrapper pour OrbitControls du module three-stdlib.

Le meilleur? Vous n'avez pas besoin de développer le catalogue ni de transmettre d'arguments. Cela fonctionne tout simplement. 💯

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