refactor: streamline instance exposure and remove unused refs (#629)

* refactor(Sky.vue, Sparkles/component.vue): streamline instance exposure and remove unused refs

- Updated `Sky.vue` to directly expose the `skyImpl` instance instead of using a shallow reference, improving clarity and performance.
- Removed the unused `sparkleRef` in `Sparkles/component.vue`, simplifying the component structure while maintaining functionality.
- These changes enhance code maintainability and align with best practices for instance management in Vue components.

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

* refactor: update type references to TresObject for improved type safety

- Changed the type of `dummy` in `TransformPayload` to `TresObject` for better alignment with TresJS framework.
- Updated `objRef` and `parentRef` in `Helper/component.vue` to use `TresObject`, enhancing type accuracy.
- Modified the `useHelper` function to accept `MaybeRefOrGetter<TresObject>` instead of `Object3D`, ensuring consistency across helper functionalities.
- These changes improve type safety and maintainability in the codebase.

* refactor(Text3D.vue, material.ts, component.vue): enhance type safety and clarity

- Updated `Text3D.vue` to explicitly type the `slots` variable as `Slots` and the return type of `localText` as `string`, improving type safety and clarity.
- Removed the unused type import of `Object3D` in `Helper/component.vue` to streamline the component structure.
- Extended Three.js types in `material.ts` to include runtime properties in the `Material` interface and created a properly typed interface for `MeshGlassMaterial`, enhancing type accuracy and maintainability.
- These changes contribute to better type safety and code clarity across the components.

* fix(ContactShadows.vue): remove unnecessary TypeScript error suppression

- Removed the `@ts-expect-error` comments in the `blurShadow` function, as they are no longer needed. This change improves code clarity and maintains a cleaner codebase by eliminating outdated error handling comments.
- The removal aligns with ongoing efforts to enhance type safety and maintainability in the project.

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/abstractions/Text3D.vue

@@ -2,6 +2,7 @@
 import { useTres } from '@tresjs/core'
 import { FontLoader, TextGeometry } from 'three-stdlib'
 import { computed, shallowRef, toRefs, toValue, useSlots, watch, watchEffect } from 'vue'
+import type { Slots } from 'vue'
 import type { TextGeometryParameters } from 'three-stdlib'
 
 export interface Glyph {
@@ -161,9 +162,9 @@ extend({ TextGeometry })
 
 const loader = new FontLoader()
 
-const slots = useSlots()
+const slots: Slots = useSlots()
 
-const localText = computed(() => {
+const localText = computed((): string => {
   if (text?.value) { return text.value }
   else if (slots.default) { return (slots.default()[0].children as string)?.trim() }
   return needUpdates.value ? '' : 'TresJS'

src/core/abstractions/useSurfaceSampler/index.ts

@@ -7,6 +7,7 @@ import {
 import { MeshSurfaceSampler } from 'three-stdlib'
 import { ref } from 'vue'
 import type { InstancedMesh, Mesh, Object3DEventMap } from 'three'
+import type { TresObject } from '@tresjs/core'
 
 export interface useSurfaceSamplerProps {
   /*
@@ -67,7 +68,7 @@ type TransformPayload = SamplePayload & {
    * This object's matrix will be updated after transforming & it will be used
    * to set the instance's matrix.
    */
-  dummy: Object3D<Object3DEventMap>
+  dummy: TresObject
   /**
    * The mesh that's initially passed to the sampler.
    * Use this if you need to apply transforms from your mesh to your instances
@@ -101,7 +102,7 @@ export const useSurfaceSampler = (
     const position = new Vector3()
     const normal = new Vector3()
     const color = new Color()
-    const dummy = new Object3D<Object3DEventMap>()
+    const dummy = new Object3D<Object3DEventMap>() as TresObject
 
     mesh.updateMatrixWorld(true)
 

src/core/controls/Helper/component.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { Object3D } from 'three'
 import { shallowRef, watchEffect } from 'vue'
 import { useHelper } from './useHelper'
+import type { TresObject } from '@tresjs/core'
 
 type HelperConstructor = new (...args: any[]) => any
 
@@ -12,8 +12,8 @@ export interface HelperProps {
 
 const props = defineProps<HelperProps>()
 
-const objRef = shallowRef<Object3D>()
-const parentRef = shallowRef<Object3D>()
+const objRef = shallowRef<TresObject>()
+const parentRef = shallowRef<TresObject>()
 
 watchEffect(() => {
   if (objRef.value && objRef.value.parent) {

src/core/controls/Helper/useHelper.ts

@@ -1,6 +1,7 @@
 import type { Object3D } from 'three'
 import type { MaybeRefOrGetter } from 'vue'
 import { onBeforeUnmount, shallowRef, toValue, watchEffect } from 'vue'
+import type { TresObject } from '@tresjs/core'
 import { useLoop, useTres } from '@tresjs/core'
 
 // NOTE: Source
@@ -10,7 +11,7 @@ type HelperType = Object3D & { update: () => void, dispose: () => void }
 type HelperConstructor = new (...args: any[]) => any
 
 export function useHelper<T extends HelperConstructor>(
-  object3D: MaybeRefOrGetter<Object3D | null | undefined | false>,
+  object3D: MaybeRefOrGetter<TresObject | null | undefined | false>,
   helperConstructor: T,
   ...args: any[]
 ) {

src/core/materials/meshGlassMaterial/material.ts

@@ -1,7 +1,20 @@
 import type { MeshStandardMaterialParameters } from 'three'
 import { Color, MathUtils, MeshStandardMaterial, Vector2 } from 'three'
 
-class MeshGlassMaterial extends MeshStandardMaterial {
+// Extend Three.js types to include properties that exist at runtime but aren't in the type definitions
+declare module 'three' {
+  interface Material {
+    defines: Record<string, string | number | boolean>
+  }
+}
+
+// Create a properly typed interface for our glass material
+interface IMeshGlassMaterial extends MeshStandardMaterial {
+  defines: Record<string, string | number | boolean>
+  version: number
+}
+
+class MeshGlassMaterial extends MeshStandardMaterial implements IMeshGlassMaterial {
   isMeshPhysicalMaterial: boolean
   clearcoatMap: null
   clearcoatRoughness: number
@@ -74,7 +87,8 @@ class MeshGlassMaterial extends MeshStandardMaterial {
   set clearcoat(value) {
     // eslint-disable-next-line style/no-mixed-operators
     if (this._clearcoat > 0 !== value > 0) {
-      this.version++
+      // Increment version to trigger shader recompilation - using mutable interface
+      ;(this as IMeshGlassMaterial).version++
     }
 
     this._clearcoat = value
@@ -87,13 +101,14 @@ class MeshGlassMaterial extends MeshStandardMaterial {
   set transmission(value) {
     // eslint-disable-next-line style/no-mixed-operators
     if (this._transmission > 0 !== value > 0) {
-      this.version++
+      // Increment version to trigger shader recompilation - using mutable interface
+      ;(this as IMeshGlassMaterial).version++
     }
 
     this._transmission = value
   }
 
-  copy(source: any) {
+  copy(source: MeshGlassMaterial) {
     super.copy(source)
 
     this.defines = {

src/core/staging/ContactShadows.vue

@@ -165,15 +165,15 @@ function blurShadow(
   pool.horizontalBlurMaterial.uniforms.h.value = blur / 256
 
   renderer.setRenderTarget(pool.renderTargetBlur)
-  // @ts-expect-error - TODO: wait for https://github.com/Tresjs/tres/issues/1040 to be fixed
+
   renderer.render(pool.blurPlane, pool.shadowCamera)
 
   pool.blurPlane.material = pool.verticalBlurMaterial
   pool.verticalBlurMaterial.uniforms.tDiffuse.value = pool.renderTargetBlur.texture
   pool.verticalBlurMaterial.uniforms.v.value = blur / 256
 
   renderer.setRenderTarget(pool.renderTarget)
-  // @ts-expect-error - TODO: wait for https://github.com/Tresjs/tres/issues/1040 to be fixed
+
   renderer.render(pool.blurPlane, pool.shadowCamera)
 
   pool.blurPlane.visible = false

src/core/staging/Sky.vue

@@ -3,7 +3,7 @@ import { useTres } from '@tresjs/core'
 // eslint-disable-file vue/attribute-hyphenation
 import { MathUtils, Vector3 } from 'three'
 import { Sky as SkyImpl } from 'three-stdlib'
-import { computed, shallowRef, watch } from 'vue'
+import { computed, watch } from 'vue'
 
 export interface SkyProps {
   /**
@@ -53,7 +53,6 @@ watch(props, () => {
   invalidate()
 })
 
-const skyRef = shallowRef<SkyImpl>()
 const skyImpl = new SkyImpl()
 const sunPosition = computed(() =>
   getSunPosition(props.azimuth, props.elevation),
@@ -66,14 +65,13 @@ function getSunPosition(azimuth: number, elevation: number) {
 }
 
 defineExpose({
-  instance: skyRef,
+  instance: skyImpl,
   sunPosition: sunPosition.value,
 })
 </script>
 
 <template>
   <primitive
-    ref="skyRef"
     :object="skyImpl"
     :material-uniforms-turbidity-value="props.turbidity"
     :material-uniforms-rayleigh-value="props.rayleigh"