# v-always-look-at 👀 <Badge type="warning" text="deprecated since v4" />

::: warning
This directive has been removed on the `v4` due incompatibility with the new renderer loop.
:::

With the new directive v-always-look-at provided by **TresJS**, you can add easily command an [Object3D](https://threejs.org/docs/index.html?q=object#api/en/core/Object3D) to always look at a specific position, this could be passed as a Vector3 or an Array.

## Usage

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

### Why not use the in built method look-at?

You could ask, this is fine but I can use the `:look-at` method directly in the component, why should I need this?

The answers is that with the method `:look-at` you will indicate to look at that position just once, when the instance is mounted, then if the object changes this will not get updated.

### You can look at other instance too!

Another advantage is that you can look at an instance in movement, for example with the camera, like so:

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

const sphereRef = shallowRef()

const { onLoop } = useRenderLoop()

// here we update the position of the sphere and the camera will always follow the object
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>
```