chore: trying to create a playground for useProgress

playground/vue/src/pages/loaders/use-progress/Model.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useTexture } from '@tresjs/core'
+import { useGLTF } from '@tresjs/cientos'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+
+const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/lab/main/public/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+console.log(nodes)
+
+const tableTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/lab/main/public/models/potions-classroom/table.png'])
+tableTexture.flipY = false
+const roomTexture = await useTexture(['https://raw.githubusercontent.com/Tresjs/lab/main/public/models/potions-classroom/room.png'])
+roomTexture.flipY = false
+
+const roomMaterial = new MeshBasicMaterial({
+  map: roomTexture,
+  side: DoubleSide,
+})
+
+nodes.Room.material = roomMaterial
+nodes.Floor.material = roomMaterial
+</script>
+
+<template>
+  <primitive :object="nodes.Room" />
+  <primitive :object="nodes.Floor" />
+</template>

playground/vue/src/pages/loaders/use-progress/Table.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+import type { Texture } from 'three'
+import { DoubleSide, MeshBasicMaterial } from 'three'
+
+const props = defineProps<{
+  texture: Texture
+}>()
+
+const { nodes } = await useGLTF('https://raw.githubusercontent.com/Tresjs/lab/main/public/models/potions-classroom/wizard-potions-classroom.glb', {
+  draco: true,
+})
+
+const bakedMaterial = new MeshBasicMaterial({
+  map: props.texture,
+  side: DoubleSide,
+})
+
+nodes.Table.children.forEach((child) => {
+  if (child.isMesh) {
+    child.material = bakedMaterial
+  }
+})
+
+const stools = Object.values(nodes).filter(node => node.name.includes('Stool'))
+
+stools.forEach((stool) => {
+  stool.material = bakedMaterial
+})
+</script>
+
+<template>
+  <primitive :object="nodes.Table" />
+  <primitive
+    v-for="stool of stools"
+    :object="stool"
+  />
+</template>

playground/vue/src/pages/loaders/use-progress/UseProgressDemo.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { OrbitControls } from '@tresjs/cientos'
+import Model from './Model.vue'
+</script>
+
+<template>
+  <TresPerspectiveCamera :position="[5, 5, 5]" />
+  <Suspense>
+    <template v-if="true">
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+      <Model />
+    </template>
+  </Suspense>
+  <TresGridHelper />
+  <TresAmbientLight :intensity="1" />
+  <OrbitControls />
+</template>

playground/vue/src/pages/loaders/use-progress/index.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import Experiment from './UseProgressDemo.vue'
+import '@tresjs/leches/styles'
+import { useProgress } from '@tresjs/cientos'
+
+useControls('fpsgraph')
+
+const { hasFinishLoading, progress } = await useProgress()
+</script>
+
+<template>
+  <OverlayInfo>
+    <h1>useProgress</h1>
+    <p>This is a demo of the useProgress hook. It shows the progress of the GLTFModel loading.</p>
+  </OverlayInfo>
+  <Transition
+    name="fade-overlay"
+    enter-active-class="opacity-1 transition-opacity duration-200"
+    leave-active-class="opacity-0 transition-opacity duration-200"
+  >
+    <div
+      v-show="!hasFinishLoading"
+      class="absolute bg-grey-600 t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">
+        Loading... {{ progress }} %
+      </div>
+    </div>
+  </Transition>
+  <TresLeches />
+  <TresCanvas clear-color="#000000">
+    <Experiment />
+  </TresCanvas>
+</template>

playground/vue/src/router/routes/loaders.ts

@@ -14,4 +14,9 @@ export const loadersRoutes = [
     name: 'useVideoTexture',
     component: () => import('../../pages/loaders/useVideoTextureDemo.vue'),
   },
+  {
+    path: '/loaders/use-progress',
+    name: 'useProgress',
+    component: () => import('../../pages/loaders/use-progress/index.vue'),
+  },
 ]