OrbitControls

OrbitControls es un controlador de cámara que te permite orbitar alrededor de un objetivo. Es una excelente manera de explorar tu escena.

Sin embargo, no forma parte del núcleo de ThreeJS. Por lo tanto, para usarlo, necesitarías importarlo desde el módulo three/addons/controls/OrbitControls.

Esto crea un problema porque TresJS crea automáticamente un catálogo del núcleo de Three para que puedas usarlos como componentes.

Afortunadamente, TresJS proporciona una forma de ampliar el catálogo de componentes. Puedes hacerlo utilizando el método extend de la biblioteca principal.

Para obtener más información sobre cómo ampliar tu catálogo de TresJS, consulta la sección de extensión.

Uso de OrbitControls

Para usar OrbitControls, debes importarlo desde el módulo three/addons/controls/OrbitControls.

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

Luego, necesitas ampliar el catálogo de componentes utilizando el método extend.

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

extend({ OrbitControls })

Ahora puedes usar el componente TresOrbitControls en tu escena.

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

Dado que OrbitControls necesita una referencia a la cámara y al renderizador, debes pasarlos como argumentos.

Puedes usar el composable useTres para obtener la cámara y el renderizador.

import { useTres } from '@tresjs/core'

const { state } = useTres()

Entonces, el código final sería algo como esto:

<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

Aquí es donde comienza la parte interesante. ✨
El paquete cientos proporciona un componente llamado <OrbitControls /> que es un envoltorio de los OrbitControls del módulo three-stdlib.

¿Lo mejor? No necesitas ampliar el catálogo ni pasar ningún argumento.
Simplemente funciona. 💯

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