feat: v-distance-to types and minor improvements

playground/src/pages/lights.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { TresCanvas, vLightHelper } from '@tresjs/core'
+import type { TresObject } from '@tresjs/core'
+import { TresCanvas, vLightHelper, vAlwaysLookAt, vDistanceTo } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 
 import { OrbitControls } from '@tresjs/cientos'
@@ -12,34 +13,39 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
+
+const planeRef: Ref<TresObject | null> = ref(null)
 </script>
 
 <template>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[3, 3, 3]" />
     <OrbitControls />
-
-    <TresMesh
-      :position="[0, 4, 0]"
-      cast-shadow
-    >
-      <TresSphereGeometry :args="[1, 32, 32]" />
-      <TresMeshToonMaterial color="yellow" />
-    </TresMesh>
+   
     <TresDirectionalLight
       v-light-helper
+      v-always-look-at="[8, 16, 0]"
       :position="[0, 8, 4]"
       :intensity="0.7"
       color="yellow"
       cast-shadow
     />
     <TresMesh
+      ref="planeRef"
       :rotation="[-Math.PI / 2, 0, 0]"
       receive-shadow
     >
       <TresPlaneGeometry :args="[10, 10, 10, 10]" />
       <TresMeshToonMaterial />
     </TresMesh>
+    <TresMesh
+      v-distance-to="planeRef"
+      :position="[2, 4, 0]"
+      cast-shadow
+    >
+      <TresSphereGeometry :args="[1, 32, 32]" />
+      <TresMeshToonMaterial color="yellow" />
+    </TresMesh>
     <TresAmbientLight :intensity="1" />
   </TresCanvas>
 </template>

src/directives/vAlwaysLookAt.ts

@@ -1,11 +1,13 @@
 import { useRenderLoop, useLogger } from '@tresjs/core'
 import type { Object3D } from 'three'
+import type { Ref } from 'vue'
 import { extractBindingPosition } from '../utils'
+import type { TresVector3 } from '../types'
 
 const { logWarning } = useLogger()
 
 export const vAlwaysLookAt = {
-  updated: (el: Object3D, binding: any) => {
+  updated: (el: Object3D, binding: Ref<TresVector3>) => {
     const observer = extractBindingPosition(binding)
     if (!observer) {
       logWarning(`v-always-look-at: problem with binding value: ${binding.value}`)

src/directives/vDistanceTo.ts

@@ -1,11 +1,13 @@
 import { useLogger } from '@tresjs/core'
 import { ArrowHelper } from 'three'
+import type { Ref } from 'vue'
 import { extractBindingPosition } from '../utils'
+import type { TresObject } from '../types'
 
 const { logWarning } = useLogger()
 
 export const vDistanceTo = {
-  updated: (el: any, binding: any) => {
+  updated: (el: TresObject, binding: Ref<TresObject>) => {
     const observer = extractBindingPosition(binding)
     if (!observer) {
       logWarning(`v-distance-to: problem with binding value: ${binding.value}`)
@@ -17,7 +19,7 @@ export const vDistanceTo = {
     }
     const dir = observer.clone().sub(el.position)
     dir.normalize()
-    arrowHelper = new ArrowHelper( dir, el.position, el.position.distanceTo(observer) / 1.5, 0xffff00 )
+    arrowHelper = new ArrowHelper( dir, el.position, el.position.distanceTo(observer), 0xffff00 )
     el.parent.add( arrowHelper )
     // eslint-disable-next-line no-console
     console.table([
@@ -27,7 +29,7 @@ export const vDistanceTo = {
     ],
     )
   },
-  unmounted: (el: any) => {
+  unmounted: (el: TresObject) => {
     arrowHelper?.dispose()
     el.parent.remove(arrowHelper)
   },

src/utils/index.ts

@@ -132,8 +132,8 @@ export const isArray = Array.isArray as (a: any) => a is any[] | readonly any[]
 
 export function extractBindingPosition(binding: any): Vector3 {
   let observer = binding.value
-  if (binding.value && binding.value?.value?.isMesh) {
-    observer = binding.value.value.position
+  if (binding.value && binding.value?.isMesh) {
+    observer = binding.value.position
   }
   if (Array.isArray(binding.value)) observer = new Vector3(...observer)
   return observer