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.

OrbitControls.vue

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

Dado que OrbitControls necesita una referencia a la cámara y al renderizador, debes pasarlos como argumentos. Puedes usar el composable useTresContext para obtener la cámara y el renderizador.

WARNING

useTresContext solo puede ser utilizado dentro de un TresCanvas ya que TresCanvas actúa como proveedor de los datos de contexto. Es por eso que creamos un subcomponente llamado OrbitControls.vue. Obtén más información sobre contexto.

import { useTresContext } from '@tresjs/core'

const { camera, renderer } = useTresContext()

So the final code would be something like this:

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

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

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