v-always-look-at 👀

Avec la nouvelle directive v-always-look-at fournie par TresJS, vous pouvez facilement ajouter une commande à un Objet 3D pour toujours regarder une position spécifique, cela pourrait être passé en tant que Vector3 ou Array..

Usage

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

Peu importe où la boîte se déplace, elle regardera toujours la position [0,0,0]

Pourquoi ne pas utiliser la méthode intégrée look-at?

Vous pourriez demander, c'est bien mais je peux utiliser la méthode :look-at directement dans le composant, pourquoi aurais-je besoin de ça?

La réponse est qu'avec la méthode :look-at, vous indiquerez de regarder cette position une seule fois, lorsque l'instance est montée, puis si l'objet change, il ne sera pas mis à jour.

Vous pouvez également consulter une autre instance!

Un autre avantage est que vous pouvez regarder une instance en mouvement, par exemple avec la caméra, comme ceci:

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

// ici nous mettons à jour la position de la sphère et la caméra suivra toujours l'objet
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>