v-always-look-at 👀

Met de nieuwe directive v-always-look-at aangeboden door TresJS, kunt u eenvoudig een opdracht Object3D toevoegen om altijd naar een specifieke positie te kijken, dit kan worden doorgegeven als een Vector3 of een Array.

Gebruik

<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { Box, vAlwaysLookAt } from '@tresjs/cientos'
</script>
<template>
    <TresCanvas >
      <TresPerspectiveCamera :position="[0, 2, 5]" />
      <Box
        v-always-look-at="new Vector3(0, 0, 0)"
      />
  </TresCanvas>
</template>

Het maakt niet uit waar de 'Box'-beweging naartoe gaat, er wordt altijd naar de positie [0,0,0] gekeken

Waarom zou u niet de ingebouwde methode 'look-at' gebruiken?

Je zou kunnen vragen: dit is prima, maar ik kan de :look-at-methode rechtstreeks in de component gebruiken, waarom zou ik dit nodig hebben?

Het antwoord is dat je met de methode :look-at aangeeft dat je slechts één keer naar die positie wilt kijken, wanneer de instantie is aangekoppeld. Als het object verandert, wordt dit niet bijgewerkt.

Je kunt ook naar een andere instantie kijken!

Een ander voordeel is dat je bijvoorbeeld met de camera een bewegende instantie als volgt kunt bekijken:

<script setup lang="ts">
import { shallowRef } from 'vue'
import { TresCanvas, useRenderLoop } from '@tresjs/core'
import { Box, vAlwaysLookAt } from '@tresjs/cientos'

const sphereRef = shallowRef()

const { onLoop } = useRenderLoop()

// hier werken we de positie van de bol bij en zal de camera het object altijd volgen
onLoop(({ elapsed }) => {
  if (sphereRef.value) {
    sphereRef.value.value.position.y = Math.sin(elapsed) * 1.5
  }
})
</script>
<template>
    <TresCanvas >
      <TresPerspectiveCamera :position="[0, 2, 5]"
        v-always-look-at="sphereRef"
      />
      <Sphere
        ref="sphereRef"
        :scale="0.5"
      />
  </TresCanvas>
</template>