v-rotate deprecated since v4

WARNING

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

Problem

When you want to simply add rotation to your mesh, you have to use the template reference, useRenderLoop and then assign the axis and the speed, but before check if you mesh is already available:

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

const boxRef = shallowRef()

const { onLoop } = useRenderLoop()

onLoop(({ elapsed }) => {
  if (boxRef.value) {
    boxRef.value.rotation.x = elapsed
  }
})
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <TresMesh
      ref="boxRef"
      :scale="0.5"
    >
      <TresBoxGeometry />
      <TresMesh>
        <OrbitControls />
      </TresMesh>
    </TresMesh>
  </TresCanvas>
</template>

And is A LOT of code just for a simple rotation right? Normally we need something fast to see if something is working

Usage

With the new directive v-rotate provided by TresJS, you can do this by just adding v-rotate to the instance.

<script setup lang="ts">
import { vRotate } from '@tresjs/core'
</script>
<template>
    <TresCanvas >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <TresMesh
      v-rotate // 😍
    >
      <TresBoxGeometry />
    </TresMesh>
  </TresCanvas>
</template>

By default v-rotate uses Quaternions so you don't have to worry by Gimbal Lock, or check if you mesh is available in the first frames.

Modifiers

You can control the axis and the rotation speed by adding modifiers

<script setup lang="ts">
import { vRotate } from '@tresjs/core'
</script>
<template>
    <TresCanvas >
    <TresPerspectiveCamera :position="[0, 2, 5]" />
    <TresMesh
      v-rotate:x.y="0.1" // the axis will be x and y with a speed of 0.1
    >
      <TresBoxGeometry />
    </TresMesh>
  </TresCanvas>
</template>