feat: applied useFrame to directives

playground/components.d.ts

@@ -18,6 +18,7 @@ declare module 'vue' {
     DanielTest: typeof import('./src/components/DanielTest.vue')['default']
     DebugUI: typeof import('./src/components/DebugUI.vue')['default']
     DeleteMe: typeof import('./src/components/DeleteMe.vue')['default']
+    DirectiveSubComponent: typeof import('./src/components/DirectiveSubComponent.vue')['default']
     DynamicModel: typeof import('./src/components/DynamicModel.vue')['default']
     EventsPropogation: typeof import('./src/components/EventsPropogation.vue')['default']
     FBXModels: typeof import('./src/components/FBXModels.vue')['default']

playground/src/components/DirectiveSubComponent.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+import { vAlwaysLookAt, vLightHelper } from '@tresjs/core'
+</script>
+
+<template>
+  <TresDirectionalLight v-light-helper v-always-look-at="[0, 0, 0]" :position="[3, 3, 3]" :intensity="1" />
+</template>

playground/src/pages/misc/Directives.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { TresCanvas, vAlwaysLookAt } from '@tresjs/core'
+import { BasicShadowMap, NoToneMapping, SRGBColorSpace } from 'three'
+
+import { OrbitControls } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+</script>
+
+<template>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <TresGridHelper />
+    <DirectiveSubComponent />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/router/routes/misc.ts

@@ -4,4 +4,9 @@ export const miscRoutes = [
     name: 'Text 3D',
     component: () => import('../../pages/misc/Text3DDemo.vue'),
   },
+  {
+    path: '/misc/directives',
+    name: 'Directives',
+    component: () => import('../../pages/misc/Directives.vue'),
+  },
 ]

src/directives/vAlwaysLookAt.ts

@@ -2,7 +2,7 @@ import type { Object3D } from 'three'
 import type { Ref } from 'vue'
 import { extractBindingPosition } from '../utils'
 import type { TresVector3 } from '../types'
-import { useLogger, useRenderLoop } from '../composables'
+import { useFrame, useLogger } from '../composables'
 
 const { logWarning } = useLogger()
 
@@ -13,8 +13,7 @@ export const vAlwaysLookAt = {
       logWarning(`v-always-look-at: problem with binding value: ${binding.value}`)
       return
     }
-    const { onLoop } = useRenderLoop()
-    onLoop(() => {
+    useFrame(() => {
       el.lookAt(observer)
     })
   },

src/directives/vRotate.ts

@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 import { Quaternion, Vector3 } from 'three'
 import type { TresObject } from '../types'
-import { useLogger, useRenderLoop } from '../composables'
+import { useFrame, useLogger } from '../composables'
 
 const { logWarning } = useLogger()
 
@@ -31,9 +31,7 @@ export const vRotate = {
     const quaternion = new Quaternion().setFromAxisAngle(new Vector3(x.value, y.value, z.value)
       .normalize(), radiansPerFrame)
 
-    const { onLoop } = useRenderLoop()
-
-    onLoop(() => {
+    useFrame(() => {
       el.applyQuaternion(quaternion)
     })
   },