v-always-look-at 👀

使用 TresJS 提供的新指令 v-always-look-at，您可以轻松地使 Object3D 始终朝向特定位置，可以传入 Vector3 对象或数组。

推荐使用

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

无论 Box 移动到何处，它都将始终朝向位置 [0,0,0]。

为什么不使用内置的 look-at 方法呢？

您可能会问，我可以直接在组件中使用 :look-at 方法，为什么我需要这个呢？

答案是使用 :look-at 方法时，您只会在实例挂载时指示其一次性朝向该位置，然后如果对象更改，它将不会更新。

您还可以查看其他实例！

另一个优势是您可以查看一个在移动中的实例，例如使用相机，如下所示：

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

// 在这里，我们更新了球体的位置，相机将始终跟随该对象
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>