fix: typescript issues (#624)

* fix: update Stats component to use onRender instead of onAfterRender

- Replaced the `onAfterRender` hook with `onRender` in the Stats component to align with the updated rendering lifecycle.
- This change ensures that the stats rendering ends at the correct point in the render cycle, improving performance and accuracy.

* fix: update useIntersect to use onRender instead of onAfterRender

- Replaced the `onAfterRender` hook with `onRender` in the `useIntersect` function to align with the updated rendering lifecycle.
- This change ensures that intersection checks occur at the correct point in the render cycle, improving performance and accuracy.

* fix: update ContactShadows component to use TresRenderer for improved type safety

- Replaced instances of `WebGLRenderer` with `TresRenderer` in the `ContactShadows.vue` component to enhance type safety and align with the TresJS framework.
- Updated the `update` and `blurShadow` functions to accept the new renderer type, ensuring compatibility with the latest rendering lifecycle.
- Added a `toValue` conversion for the `scene` parameter in the `update` function to maintain reactivity and proper scene handling.

* fix: remove unused type import in ContactShadows.vue

- Removed the unused import of `WebGLRenderer` from `ContactShadows.vue` to enhance code clarity and maintainability.
- This change aligns with the ongoing effort to streamline type imports and improve type safety across the codebase.

* fix: update model traversal to use Three.js Mesh for improved type safety

- Replaced the type import of `TresObject` with `Mesh` from Three.js in both `useFBX` and `useGLTF` components to enhance type safety and align with Three.js standards.
- Updated model traversal logic to utilize `instanceof Mesh` for better type checking, ensuring that shadow properties are correctly applied to mesh objects.

* fix: improve object addition in EnvironmentScene for better type handling

- Updated the `add` method in `EnvironmentScene` to iterate over objects and add them individually to `virtualScene`, enhancing type safety and clarity.
- Added a TypeScript error suppression comment to address a type error encountered during the update.

* fix: update type definitions for @types/node and @types/three

- Upgraded `@types/node` from `22.10.5` to `24.0.3` and `@types/three` from `0.176.0` to `0.177.0` in `package.json` to ensure compatibility with the latest TypeScript features and improvements.
- Updated `pnpm-lock.yaml` to reflect these changes, ensuring all dependencies are aligned with the new type definitions.

* fix: enhance type definitions in Align component for improved type safety

- Updated the type definition for the `parent` property in the `AlignCallbackOptions` interface to use `Object3D<Object3DEventMap>` for better type accuracy.
- Changed the type of the `container` property to `Group` to align with Three.js standards.
- Adjusted the `emit` call in the `update` function to cast `parent` as `Object3D<Object3DEventMap>`, ensuring type safety during event handling.

* fix: update StatsGl component to use onRender for improved rendering lifecycle

- Replaced the `onAfterRender` hook with `onRender` in the `StatsGl` component to align with the updated rendering lifecycle.
- This change ensures that the stats update occurs at the correct point in the render cycle, enhancing performance and accuracy.

* fix: refactor MeshReflectionMaterial to improve rendering lifecycle and type safety

- Replaced the custom `onBeforeRender` function with the `onBeforeRender` from `useLoop` for better integration with the rendering lifecycle.
- Enhanced type safety by ensuring the correct types are used for `renderer`, `scene`, and `camera`.
- Removed redundant code related to rendering logic, streamlining the component and improving maintainability.
- Added warnings for unsupported WebGPURenderer to inform users of limitations.
- Updated texture matrix and projection matrix calculations to ensure accurate rendering behavior.

* fix: enhance type safety in LOD component by updating Object3D type

- Updated the import statement to include `Object3DEventMap` for improved type accuracy.
- Modified the `levels` array and `object` assignment to use `Object3D<Object3DEventMap>`, ensuring better type handling and alignment with Three.js standards.

* fix: enhance type safety and streamline imports in MeshReflectionMaterial and BakeShadows

- Removed unused imports of `Object3D` and `Scene` in `MeshReflectionMaterial` to improve code clarity.
- Updated the `BakeShadows` component to conditionally set shadow map properties only if the renderer is an instance of `WebGLRenderer`, enhancing type safety and preventing potential runtime errors.

* fix: update @Tresjs/core dependency to a specific version URL for improved stability

- Changed the dependency for `@Tresjs/core` from version `5.0.0-next.4` to a specific URL `https://pkg.pr.new/@tresjs/core@bb01f3d` in both `package.json` and `playground/vue/package.json` to ensure consistent behavior across environments.
- Updated `pnpm-lock.yaml` to reflect the new dependency URL, maintaining alignment with the updated package structure.
- Enhanced type safety in various components by refining type imports and ensuring correct usage of `Object3D<Object3DEventMap>` where applicable.

* fix: update @Tresjs/core dependency to a stable version

- Changed the dependency for `@Tresjs/core` from a specific URL to version `5.0.0-next.5` in both `package.json` and `pnpm-lock.yaml` to ensure consistent behavior and stability across environments.
- Updated the lock file to reflect the new version, maintaining alignment with the updated package structure.

Author: alvarosabu

package.json

@@ -50,6 +50,7 @@
     "build": "vite build",
     "release": "release-it",
     "lint": "eslint .",
+    "typecheck": "vue-tsc --noEmit",
     "lint:fix": "eslint . --fix",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
@@ -70,10 +71,10 @@
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.1",
-    "@tresjs/core": "5.0.0-next.2",
+    "@tresjs/core": "5.0.0-next.5",
     "@tresjs/eslint-config": "^1.4.0",
-    "@types/node": "^22.10.5",
-    "@types/three": "^0.176.0",
+    "@types/node": "^24.0.3",
+    "@types/three": "^0.177.0",
     "@typescript-eslint/eslint-plugin": "^8.19.0",
     "@typescript-eslint/parser": "^8.19.0",
     "@vitejs/plugin-vue": "^5.2.4",

playground/vue/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tresjs/core": "5.0.0-next.2",
+    "@tresjs/core": "https://pkg.pr.new/@tresjs/core@bb01f3d",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -13,8 +13,8 @@ const size = computed(() => ({ width: sizes.width.value, height: sizes.height.va
 
 useLoop().onBeforeRender(({ camera }) => {
   const obj = innerRef.value
-  if (!obj) { return }
-  const sf = calculateScaleFactor(obj.getWorldPosition(worldPos), 1, camera, size.value)
+  if (!obj || !camera.value) { return }
+  const sf = calculateScaleFactor(obj.getWorldPosition(worldPos), 1, camera.value, size.value)
   obj.scale.setScalar(sf)
 })
 

src/core/abstractions/ScreenSizer.vue

@@ -6,7 +6,7 @@ import {
 } from 'three'
 import { MeshSurfaceSampler } from 'three-stdlib'
 import { ref } from 'vue'
-import type { InstancedMesh, Mesh } from 'three'
+import type { InstancedMesh, Mesh, Object3DEventMap } from 'three'
 
 export interface useSurfaceSamplerProps {
   /*
@@ -67,7 +67,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
+  dummy: Object3D<Object3DEventMap>
   /**
    * 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 +101,7 @@ export const useSurfaceSampler = (
     const position = new Vector3()
     const normal = new Vector3()
     const color = new Color()
-    const dummy = new Object3D()
+    const dummy = new Object3D<Object3DEventMap>()
 
     mesh.updateMatrixWorld(true)
 

src/core/abstractions/useSurfaceSampler/index.ts

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import type { TresObject } from '@tresjs/core'
+import { Mesh } from 'three'
 import { useFBX } from '.'
 
 export interface FBXModelProps {
@@ -52,8 +52,8 @@ defineExpose({
 const model = await useFBX(props.path as string)
 
 if (props.castShadow || props.receiveShadow) {
-  model.traverse((child: TresObject) => {
-    if (child.isMesh) {
+  model.traverse((child) => {
+    if (child instanceof Mesh) {
       child.castShadow = props.castShadow
       child.receiveShadow = props.receiveShadow
     }

src/core/loaders/useFBX/component.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { watch } from 'vue'
-import type { TresObject } from '@tresjs/core'
+import { type Group, Mesh } from 'three'
 import { useGLTF } from '.'
 
 export interface GLTFModelProps {
@@ -77,14 +77,14 @@ const { state, isLoading } = useGLTF(props.path as string, {
   decoderPath: props.decoderPath,
 })
 
-let modelObject: TresObject | null = null
+let modelObject: Group | null = null
 
 watch(state, (newVal) => {
   if (newVal?.scene) {
     modelObject = newVal.scene
-    if (props.castShadow || props.receiveShadow) {
-      modelObject.traverse((child: TresObject) => {
-        if (child.isMesh) {
+    if ((props.castShadow || props.receiveShadow) && modelObject) {
+      modelObject.traverse((child) => {
+        if (child instanceof Mesh) {
           child.castShadow = props.castShadow
           child.receiveShadow = props.receiveShadow
         }

src/core/loaders/useGLTF/component.vue

@@ -1,4 +1,4 @@
-import type { TresLoader, TresLoaderOptions } from '@tresjs/core'
+import type { TresLoader, TresLoaderOptions, TresObject } from '@tresjs/core'
 import { buildGraph, useLoader } from '@tresjs/core'
 
 import { computed, type MaybeRef } from 'vue'
@@ -51,13 +51,12 @@ export function useGLTF(path: MaybeRef<string>, options?: UseGLTFOptions) {
   }
 
   const result = useLoader(GLTFLoader, path, useLoaderOptions)
-
   const nodes = computed(() => {
-    return result.state.value?.scene ? buildGraph(result.state.value?.scene).nodes : {}
+    return result.state.value?.scene ? buildGraph(result.state.value?.scene as unknown as TresObject).nodes : {}
   })
 
   const materials = computed(() => {
-    return result.state.value?.scene ? buildGraph(result.state.value?.scene).materials : {}
+    return result.state.value?.scene ? buildGraph(result.state.value?.scene as unknown as TresObject).materials : {}
   })
 
   return {

src/core/loaders/useGLTF/index.ts

@@ -1,6 +1,9 @@
 <!-- eslint-disable vue/attribute-hyphenation -->
 <script setup lang="ts">
 import { logWarning, useLoop, useTres } from '@tresjs/core'
+import type {
+  Texture,
+} from 'three'
 import {
   Color,
   DepthTexture,
@@ -14,19 +17,14 @@ import {
   Vector2,
   Vector3,
   Vector4,
+  WebGLRenderer,
   WebGLRenderTarget,
 } from 'three'
-import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
+import { computed, onBeforeUnmount, shallowRef, toValue, watch } from 'vue'
 import type { TresColor } from '@tresjs/core'
-import type {
-  Camera,
-  Object3D,
-  Scene,
-  Texture,
-  WebGLRenderer,
-} from 'three'
 import { BlurPass } from './BlurPass'
 import { MeshReflectionMaterial } from './material'
+import { WebGPURenderer } from 'three/webgpu'
 
 export interface MeshReflectionMaterialProps {
 
@@ -204,87 +202,6 @@ const fboBlur = new WebGLRenderTarget(
   },
 )
 
-function onBeforeRender(renderer: WebGLRenderer, scene: Scene, camera: Camera, object: Object3D) {
-  invalidate()
-
-  const currentXrEnabled = renderer.xr.enabled
-  const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate
-
-  state.reflectorWorldPosition.setFromMatrixPosition(object.matrixWorld)
-  state.cameraWorldPosition.setFromMatrixPosition(camera.matrixWorld as Matrix4)
-  state.rotationMatrix.extractRotation(object.matrixWorld)
-  state.normal.set(0, 0, 1)
-  state.normal.applyMatrix4(state.rotationMatrix)
-  state.reflectorWorldPosition.addScaledVector(state.normal, props.reflectorOffset)
-  state.view.subVectors(state.reflectorWorldPosition, state.cameraWorldPosition)
-
-  // NOTE: Avoid rendering when reflector is facing away
-  if (state.view.dot(state.normal) > 0) { return }
-
-  // NOTE: Avoid re-rendering the reflective object.
-  object.visible = false
-
-  state.view.reflect(state.normal).negate()
-  state.view.add(state.reflectorWorldPosition)
-  state.rotationMatrix.extractRotation(camera.matrixWorld as Matrix4)
-  state.lookAtPosition.set(0, 0, -1)
-  state.lookAtPosition.applyMatrix4(state.rotationMatrix)
-  state.lookAtPosition.add(state.cameraWorldPosition)
-  state.target.subVectors(state.reflectorWorldPosition, state.lookAtPosition)
-  state.target.reflect(state.normal).negate()
-  state.target.add(state.reflectorWorldPosition)
-  state.virtualCamera.position.copy(state.view)
-  state.virtualCamera.up.set(0, 1, 0)
-  state.virtualCamera.up.applyMatrix4(state.rotationMatrix)
-  state.virtualCamera.up.reflect(state.normal)
-  state.virtualCamera.lookAt(state.target)
-  state.virtualCamera.far = (camera as PerspectiveCamera).far
-  state.virtualCamera.updateMatrixWorld()
-  state.virtualCamera.projectionMatrix.copy((camera as PerspectiveCamera).projectionMatrix)
-
-  // NOTE: Update the texture matrix
-  state.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0)
-  state.textureMatrix.multiply(state.virtualCamera.projectionMatrix)
-  state.textureMatrix.multiply(state.virtualCamera.matrixWorldInverse)
-  state.textureMatrix.multiply(object.matrixWorld)
-
-  // NOTE: Now update projection matrix with new clip reflectorPlane, implementing code from: http://www.terathon.com/code/oblique.html
-  // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
-  state.reflectorPlane.setFromNormalAndCoplanarPoint(state.normal, state.reflectorWorldPosition)
-  state.reflectorPlane.applyMatrix4(state.virtualCamera.matrixWorldInverse)
-  state.clipPlane.set(
-    state.reflectorPlane.normal.x,
-    state.reflectorPlane.normal.y,
-    state.reflectorPlane.normal.z,
-    state.reflectorPlane.constant,
-  )
-  const projectionMatrix = state.virtualCamera.projectionMatrix
-  state.q.x = (Math.sign(state.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0]
-  state.q.y = (Math.sign(state.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5]
-  state.q.z = -1.0
-  state.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]
-  // NOTE: Calculate the scaled reflectorPlane vector
-  state.clipPlane.multiplyScalar(2.0 / state.clipPlane.dot(state.q))
-  // NOTE: Replacing the third row of the projection matrix
-  projectionMatrix.elements[2] = state.clipPlane.x
-  projectionMatrix.elements[6] = state.clipPlane.y
-  projectionMatrix.elements[10] = state.clipPlane.z + 1.0
-  projectionMatrix.elements[14] = state.clipPlane.w
-
-  renderer.shadowMap.autoUpdate = false
-  renderer.setRenderTarget(fboSharp)
-  if (!renderer.autoClear) { renderer.clear() }
-
-  renderer.render(scene, state.virtualCamera)
-  blurpass.render(renderer, fboSharp, fboBlur)
-
-  // NOTE: Restore the previous render target and material
-  renderer.xr.enabled = currentXrEnabled
-  renderer.shadowMap.autoUpdate = currentShadowAutoUpdate
-  object.visible = true
-  renderer.setRenderTarget(null)
-}
-
 watch(
   () => [props.resolution],
   () => {
@@ -360,12 +277,99 @@ onBeforeUnmount(() => {
   fboBlur.dispose()
   blurpass.dispose()
 })
+const { onBeforeRender } = useLoop()
 
-useLoop().onBeforeRender(({ renderer, scene, camera }) => {
+onBeforeRender(({ renderer, scene, camera }) => {
   const parent = (materialRef.value as any)?.__tres?.parent
   if (!parent) { return }
-  onBeforeRender(renderer, scene, camera, parent)
-  invalidate()
+  if (renderer instanceof WebGPURenderer) {
+    console.warn('MeshReflectionMaterial: WebGPURenderer is not supported yet')
+    return
+  }
+  if (renderer instanceof WebGLRenderer) {
+    invalidate()
+
+    const currentXrEnabled = renderer.xr.enabled
+    const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate
+
+    state.reflectorWorldPosition.setFromMatrixPosition(parent.matrixWorld)
+    state.cameraWorldPosition.setFromMatrixPosition(camera.value?.matrixWorld as Matrix4)
+    state.rotationMatrix.extractRotation(parent.matrixWorld)
+    state.normal.set(0, 0, 1)
+    state.normal.applyMatrix4(state.rotationMatrix)
+    state.reflectorWorldPosition.addScaledVector(state.normal, props.reflectorOffset)
+    state.view.subVectors(state.reflectorWorldPosition, state.cameraWorldPosition)
+
+    // NOTE: Avoid rendering when reflector is facing away
+    if (state.view.dot(state.normal) > 0) { return }
+
+    // NOTE: Avoid re-rendering the reflective object.
+    parent.visible = false
+
+    state.view.reflect(state.normal).negate()
+    state.view.add(state.reflectorWorldPosition)
+    state.rotationMatrix.extractRotation(camera.value?.matrixWorld as Matrix4)
+    state.lookAtPosition.set(0, 0, -1)
+    state.lookAtPosition.applyMatrix4(state.rotationMatrix)
+    state.lookAtPosition.add(state.cameraWorldPosition)
+    state.target.subVectors(state.reflectorWorldPosition, state.lookAtPosition)
+    state.target.reflect(state.normal).negate()
+    state.target.add(state.reflectorWorldPosition)
+    state.virtualCamera.position.copy(state.view)
+    state.virtualCamera.up.set(0, 1, 0)
+    state.virtualCamera.up.applyMatrix4(state.rotationMatrix)
+    state.virtualCamera.up.reflect(state.normal)
+    state.virtualCamera.lookAt(state.target)
+    state.virtualCamera.far = (camera.value as PerspectiveCamera).far
+    state.virtualCamera.updateMatrixWorld()
+    state.virtualCamera.far = (camera.value as PerspectiveCamera).far
+    state.virtualCamera.projectionMatrix.copy((camera.value as PerspectiveCamera).projectionMatrix)
+
+    // NOTE: Update the texture matrix
+    state.textureMatrix.set(0.5, 0.0, 0.0, 0.5, 0.0, 0.5, 0.0, 0.5, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 1.0)
+    state.textureMatrix.multiply(state.virtualCamera.projectionMatrix)
+    state.textureMatrix.multiply(state.virtualCamera.matrixWorldInverse)
+    state.textureMatrix.multiply(parent.matrixWorld)
+
+    // NOTE: Now update projection matrix with new clip reflectorPlane, implementing code from: http://www.terathon.com/code/oblique.html
+    // Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
+    state.reflectorPlane.setFromNormalAndCoplanarPoint(state.normal, state.reflectorWorldPosition)
+    state.reflectorPlane.applyMatrix4(state.virtualCamera.matrixWorldInverse)
+    state.clipPlane.set(
+      state.reflectorPlane.normal.x,
+      state.reflectorPlane.normal.y,
+      state.reflectorPlane.normal.z,
+      state.reflectorPlane.constant,
+    )
+    const projectionMatrix = state.virtualCamera.projectionMatrix
+    state.q.x = (Math.sign(state.clipPlane.x) + projectionMatrix.elements[8]) / projectionMatrix.elements[0]
+    state.q.y = (Math.sign(state.clipPlane.y) + projectionMatrix.elements[9]) / projectionMatrix.elements[5]
+    state.q.z = -1.0
+    state.q.w = (1.0 + projectionMatrix.elements[10]) / projectionMatrix.elements[14]
+    // NOTE: Calculate the scaled reflectorPlane vector
+    state.clipPlane.multiplyScalar(2.0 / state.clipPlane.dot(state.q))
+    // NOTE: Replacing the third row of the projection matrix
+    projectionMatrix.elements[2] = state.clipPlane.x
+    projectionMatrix.elements[6] = state.clipPlane.y
+    projectionMatrix.elements[10] = state.clipPlane.z + 1.0
+    projectionMatrix.elements[14] = state.clipPlane.w
+
+    renderer.shadowMap.autoUpdate = false
+    renderer.setRenderTarget(fboSharp)
+    if (!renderer.autoClear) { renderer.clear() }
+
+    renderer.render(toValue(scene), state.virtualCamera)
+    if (renderer instanceof WebGLRenderer) {
+      blurpass.render(renderer, fboSharp, fboBlur)
+    }
+
+    // NOTE: Restore the previous render target and material
+    renderer.xr.enabled = currentXrEnabled
+    renderer.shadowMap.autoUpdate = currentShadowAutoUpdate
+    parent.visible = true
+    renderer.setRenderTarget(null)
+    invalidate()
+  }
 })
 defineExpose({ instance: materialRef })
 </script>

src/core/materials/meshReflectionMaterial/index.vue

@@ -1,4 +1,5 @@
 import { useTres } from '@tresjs/core'
+import { WebGLRenderer } from 'three'
 import { defineComponent, watchEffect } from 'vue'
 
 export const BakeShadows = defineComponent({
@@ -8,8 +9,10 @@ export const BakeShadows = defineComponent({
     const { renderer } = useTres()
 
     watchEffect(() => {
-      renderer.shadowMap.autoUpdate = false
-      renderer.shadowMap.needsUpdate = true
+      if (renderer instanceof WebGLRenderer) {
+        renderer.shadowMap.autoUpdate = false
+        renderer.shadowMap.needsUpdate = true
+      }
     })
   },
 })