chore: update @Tresjs/core dependency to version 5.0.0-next.0

- Changed the dependency for @Tresjs/core in package.json and playground/vue/package.json to the stable version 5.0.0-next.0 from a previous URL reference.
- Updated pnpm-lock.yaml to reflect the new version of @Tresjs/core across all relevant sections.
- Adjusted the useGLTF implementation in documentation to align with the new state management approach.

Author: alvarosabu

docs/guide/loaders/use-gltf.md

@@ -49,7 +49,7 @@ An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Dr
 ```ts
 import { useGLTF } from '@tresjs/cientos'
 
-const { scene } = useGLTF('/models/AkuAku.gltf', { draco: true })
+const { state } = useGLTF('/models/AkuAku.gltf', { draco: true })
 ```
 
 ## Options

package.json

@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^10.0.0",
-    "@tresjs/core": "https://pkg.pr.new/@tresjs/core@a9c3e98",
+    "@tresjs/core": "5.0.0-next.0",
     "@tresjs/eslint-config": "^1.4.0",
     "@types/node": "^22.10.5",
     "@types/three": "^0.172.0",

playground/vue/package.json

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

playground/vue/src/pages/loaders/use-gltf/TheModel.vue

@@ -2,13 +2,26 @@
 /* eslint-disable no-console */
 import { useGLTF } from '@tresjs/cientos'
 
-const { state: model } = useGLTF(
+const state = inject<{
+  hasFinishLoading: boolean
+  progress: number
+}>('gltf-loader-state')!
+
+const { state: model, progress } = useGLTF(
   '/blender-cube-draco.glb',
   { draco: true },
 )
 
-watch(model, (newVal) => {
-  console.log(newVal)
+watch(model, (newModel) => {
+  console.log('model', newModel)
+  setTimeout(() => {
+    state.hasFinishLoading = true
+  }, 1000)
+})
+
+watch(progress, (newProgress) => {
+  console.log('progress', newProgress)
+  state.progress = newProgress.percentage
 }, { immediate: true })
 </script>
 

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

@@ -1,23 +1,42 @@
 <script setup lang="ts">
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import BlenderCube from '../../../components/gltf/BlenderCube.vue'
+import TheModel from './TheModel.vue'
 
 const gl = {
   clearColor: '#82DBC5',
   shadows: true,
 }
+
+const state = reactive({
+  hasFinishLoading: false,
+  progress: 0,
+})
+
+provide('gltf-loader-state', state)
 </script>
 
 <template>
+  <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="!state.hasFinishLoading"
+      class="absolute bg-white t-0 l-0 w-full h-full z-20 flex justify-center items-center text-black font-mono"
+    >
+      <div class="w-200px">
+        Loading...
+        {{ state.progress }} %
+      </div>
+    </div>
+  </Transition>
   <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[5.3, 2.45, 9.3]" :look-at="[0, 0, 0]" />
     <OrbitControls />
-    <!-- <TresGroup :position="[0, 1, 0]">
-      <TheModel />
-    </TresGroup> -->
     <TresGroup :position="[0, 1, 0]">
-      <BlenderCube />
+      <TheModel />
     </TresGroup>
     <TresMesh
       :rotate-x="Math.PI * -0.5"