fix: enhance texture and loader handling with automatic invalidation when resources are loaded

playground/vue/src/components/BlenderCube.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
-import { dispose } from '@tresjs/core'
+import { dispose, useTexture } from '@tresjs/core'
 import { useControls } from '@tresjs/leches'
 
 const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 const model = nodes.Cube
-
 model.position.set(0, 1, 0)
 
+const texture = await useTexture(['https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg'])
+
+model.children[0].material.map = texture
+
 useControls({
   disposeBtn: {
     label: 'Dispose',

playground/vue/src/pages/advanced/on-demand/experience.vue

@@ -1,18 +1,13 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { useTres } from '@tresjs/core'
-import { ref, watch } from 'vue'
+import { ref } from 'vue'
 import BlenderCube from '../../../components/BlenderCube.vue'
 
 const { invalidate } = useTres()
 
 const blenderCubeRef = ref()
 
-watch(blenderCubeRef, (prev, next) => {
-  if (!next) { return }
-  invalidate()
-})
-
 function onControlChange() {
   invalidate()
 }

playground/vue/src/pages/advanced/on-demand/index.vue

@@ -18,6 +18,8 @@ function onRender() {
     clear-color="#82DBC5"
     @render="onRender"
   >
-    <OnDemandExperience />
+    <Suspense>
+      <OnDemandExperience />
+    </Suspense>
   </TresCanvas>
 </template>

src/composables/useLoader/index.ts

@@ -1,6 +1,6 @@
 import type { Loader, LoadingManager, Object3D } from 'three'
 import type { TresObject } from '../../types'
-import { useLogger } from '..'
+import { useLogger, useTresContext } from '..'
 
 export interface TresLoader<T> extends Loader {
   load: (
@@ -73,6 +73,8 @@ export async function useLoader<T>(
   cb?: (proto: TresLoader<T>) => void,
 ): Promise<T | T[]> {
   const { logError } = useLogger()
+  const { invalidate } = useTresContext()
+
   const proto = new Loader()
   if (cb) {
     cb(proto)
@@ -89,6 +91,7 @@ export async function useLoader<T>(
         if (data.scene) {
           Object.assign(data, traverseObjects(data.scene))
         }
+        invalidate()
         resolve(data as T | T[])
       },
       onProgress,

src/composables/useTexture/index.ts

@@ -1,6 +1,7 @@
 import type { LoadingManager, Texture } from 'three'
 import { TextureLoader } from 'three'
 import { isArray } from '../../utils'
+import { useTresContext } from '../useTresContextProvider'
 
 export interface PBRMaterialOptions {
   /**
@@ -117,6 +118,7 @@ export async function useTexture(
   manager?: LoadingManager,
 ): Promise<Texture | Texture[] | PBRTextureMaps> {
   const textureLoader = new TextureLoader(manager)
+  const { invalidate } = useTresContext()
 
   /**
    * Load a texture.
@@ -127,7 +129,10 @@ export async function useTexture(
   const loadTexture = (url: string): Promise<Texture> => new Promise((resolve, reject) => {
     textureLoader.load(
       url,
-      texture => resolve(texture),
+      (texture) => {
+        resolve(texture)
+        invalidate()
+      },
       () => null,
       () => {
         reject(new Error('[useTextures] - Failed to load texture'))