feat: useProgress composable

playground/.eslintrc-auto-import.json

@@ -57,6 +57,7 @@
     "watch": true,
     "watchEffect": true,
     "watchPostEffect": true,
-    "watchSyncEffect": true
+    "watchSyncEffect": true,
+    "toValue": true
   }
-}
+}

playground/auto-imports.d.ts

@@ -45,6 +45,7 @@ declare global {
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']

playground/components.d.ts

@@ -10,6 +10,8 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     ContactShadowsDemo: typeof import('./src/components/ContactShadowsDemo.vue')['default']
+    Environment: typeof import('./src/components/Environment.vue')['default']
+    EnvironmentDemo: typeof import('./src/components/EnvironmentDemo.vue')['default']
     Gltf: typeof import('./src/components/gltf/index.vue')['default']
     LeviosoDemo: typeof import('./src/components/LeviosoDemo.vue')['default']
     MapControlsDemo: typeof import('./src/components/MapControlsDemo.vue')['default']

playground/src/components/EnvironmentDemo.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
+const environmentFiles = ['/px.jpg', '/nx.jpg', '/py.jpg', '/ny.jpg', '/pz.jpg', '/nz.jpg']
+
+import { OrbitControls, useProgress, Environment } from '@tresjs/cientos'
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  shadowMapType: BasicShadowMap,
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const { progress, hasFinishLoading, items } = await useProgress()
+</script>
+
+<template>
+  <pre>{{ items }}</pre>
+  <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-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... {{ progress }} %
+        <i class="i-ic-twotone-catching-pokemon animate-rotate-in"></i>
+      </div>
+    </div>
+  </Transition>
+  <TresCanvas v-bind="gl">
+    <TresPerspectiveCamera :position="[3, 3, 3]" />
+    <OrbitControls />
+    <Suspense>
+      <Environment
+        background
+        :files="environmentFiles"
+        :path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
+      />
+    </Suspense>
+    <TresGridHelper />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>

playground/src/pages/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts"></script>
 <template>
   <Suspense>
-    <PrecipitationDemo />
+    <EnvironmentDemo />
   </Suspense>
 </template>

src/core/abstractions/index.ts

@@ -7,7 +7,19 @@ import Precipitation from './Precipitation.vue'
 import Smoke from './Smoke.vue'
 import Levioso from './Levioso.vue'
 import ContactShadows from './ContactShadows.vue'
+import { useProgress } from './useProgress'
 
 export * from './useParallax'
 export * from './useEnvironment'
-export { Text3D, useAnimations, Environment, MouseParallax, Stars, Smoke, Levioso, ContactShadows, Precipitation }
+export {
+  Text3D,
+  useAnimations,
+  Environment,
+  MouseParallax,
+  Stars,
+  Smoke,
+  Levioso,
+  ContactShadows,
+  Precipitation,
+  useProgress,
+}

src/core/abstractions/useProgress.ts

@@ -0,0 +1,43 @@
+import { DefaultLoadingManager } from 'three'
+import { Ref, ref } from 'vue'
+
+let saveLastTotalLoaded = 0
+
+export function useProgress(): Promise<{
+  hasFinishLoading: Ref<boolean>
+  progress: Ref<number>
+  items: Ref<string[]>
+}> {
+  const hasFinishLoading = ref(false)
+  const progress = ref(0)
+  const items: Ref<string[]> = ref([])
+
+  return new Promise(resolve => {
+    DefaultLoadingManager.onStart = () => {
+      hasFinishLoading.value = false
+    }
+
+    DefaultLoadingManager.onLoad = () => {
+      hasFinishLoading.value = true
+    }
+
+    DefaultLoadingManager.onProgress = (item, loaded, total) => {
+      if (loaded === total) {
+        saveLastTotalLoaded = total
+        hasFinishLoading.value = true
+        items.value.push(item)
+      }
+      progress.value = Math.round(((loaded - saveLastTotalLoaded) / (total - saveLastTotalLoaded)) * 100 || 100, 2)
+    }
+
+    DefaultLoadingManager.onError = () => {
+      hasFinishLoading.value = true
+    }
+
+    resolve({
+      items,
+      hasFinishLoading,
+      progress,
+    })
+  })
+}