OrbitControls

OrbitControls is een cameracontroller waarmee je rond een doel kunt cirkelen. Het is een geweldige manier om je scène te verkennen.

Het maakt echter geen deel uit van de kern van ThreeJS. Om het te gebruiken moet je het dus importeren vanuit de module three/addons/controls/OrbitControls.

Dit levert een probleem op omdat TresJS automatisch een catalogus van de kern van Three maakt, zodat u deze als componenten kunt gebruiken.

Gelukkig biedt TresJS een manier om de catalogus met componenten uit te breiden. U kunt dit doen door de extend-methode uit de kernbibliotheek te gebruiken.

Voor meer informatie over het uitbreiden van uw TresJS-catalogus raadpleegt u de sectie extending.

OrbitControls gebruiken

Om OrbitControls te gebruiken moet je die importeren via de three/addons/controls/OrbitControls module.

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

Vervolgens moet u de catalogus met componenten uitbreiden met behulp van de extend methode.

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

extend({ OrbitControls })

Nu kun je de TresOrbitControls component gebruiken in je scene.

OrbitControls.vue

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

Omdat OrbitControls een verwijzing naar de camera en de renderer nodig heeft. Moet je die als argumenten doorgeven.U kunt de composable useTresContext gebruiken om de camera en de renderer op te halen.

WARNING

useTresContext kan alleen binnen een TresCanvas worden gebruikt, omdat TresCanvas fungeert als de provider voor de context data. Daarom hebben we een subcomponent gemaakt met de naam OrbitControls.vue. Zie meer over context.

import { useTresContext } from '@tresjs/core'

const { camera, renderer } = useTresContext()

Dus de eindcode word zoiets als:

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

Hier begint het fancy gedeelte. ✨ De cientos package bied ons de component <OrbitControls /> wat een wrapper van de OrbitControls is van de three-stdlib module.

Het beste gedeelte? Je hoeft de catalogus niet te extenden of arguments door te geven. It just works. 💯

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