fix: update camera reference handling in Billboard and ScreenSpace components

- Modified the `update` function in `Billboard.vue` to correctly use `camera.value` for improved reactivity.
- Updated the camera reference handling in `ScreenSpace.vue` to ensure both `outerRef` and `camera.value` are checked before accessing their properties, enhancing stability.
- Adjusted the `imageBounds` computed property in `Image/component.vue` to safely access image dimensions, preventing potential runtime errors.
- Removed unused `shallowRef` import in `Sparkles/component.vue` to streamline the component structure.

Author: alvarosabu

src/core/abstractions/Billboard.vue

@@ -60,7 +60,7 @@ function update(camera?: Camera) {
 }
 
 useLoop().onBeforeRender(({ camera }) => {
-  if (props.autoUpdate) { update(camera) }
+  if (props.autoUpdate) { update(camera.value) }
 })
 
 defineExpose({ instance: outerRef, update })

src/core/abstractions/Image/component.vue

@@ -79,7 +79,7 @@ const imageRef = shallowRef()
 const texture = shallowRef<Texture | null>(props.texture ?? null)
 const size = useTres().sizes
 const planeBounds = computed(() => Array.isArray(props.scale) ? [props.scale[0], props.scale[1]] : [props.scale, props.scale])
-const imageBounds = computed(() => [texture.value?.image.width ?? 0, texture.value?.image.height ?? 0])
+const imageBounds = computed(() => [texture.value?.image?.width ?? 0, texture.value?.image?.height ?? 0])
 const resolution = computed(() => Math.max(size.width.value, size.height.value))
 
 watchEffect(() => {
@@ -88,7 +88,7 @@ watchEffect(() => {
   }
   else {
     const { state: t } = useTexture(props.url!)
-    texture.value = t
+    texture.value = t.value
   }
 })
 

src/core/abstractions/ScreenSpace.vue

@@ -13,9 +13,9 @@ withDefaults(defineProps<ScreenSpaceProps>(), {
 const outerRef = shallowRef()
 
 useLoop().onBeforeRender(({ camera }) => {
-  if (outerRef.value) {
-    outerRef.value.quaternion.copy(camera.quaternion)
-    outerRef.value.position.copy(camera.position)
+  if (outerRef.value && camera.value) {
+    outerRef.value.quaternion.copy(camera.value.quaternion)
+    outerRef.value.position.copy(camera.value.position)
   }
 })
 

src/core/staging/Sparkles/component.vue

@@ -11,7 +11,7 @@ import {
   Uniform,
   Vector3,
 } from 'three'
-import { onMounted, onUnmounted, shallowRef, toRefs, watch } from 'vue'
+import { onMounted, onUnmounted, toRefs, watch } from 'vue'
 import type { TresColor, VectorFlexibleParams } from '@tresjs/core'
 import type { Blending, BufferGeometry, IUniform, ShaderMaterialParameters, Texture } from 'three'
 import type { Ref } from 'vue'