add loader

front/src/App.vue

@@ -12,5 +12,7 @@ import { RouterLink } from 'vue-router';
     <span style="flex-grow:1"></span>
     <RouterLink to="/"><i-mdi-home /></RouterLink>
   </div>
+  <Suspense>
     <RouterView />
+  </Suspense>
 </template>

front/src/components/Promo/main.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { CameraControls, FBXModel } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core';
+import { CameraControls, FBXModel, useProgress } from '@tresjs/cientos'
+import { TresCanvas, useRenderLoop } from '@tresjs/core';
 import { Vector3 } from 'three';
-import { reactive } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 
-import model from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
+import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
 
 const router = useRouter()
 
@@ -30,23 +30,51 @@ const controlsState = reactive({
     maxZoom: 1,
     minZoom: 0.2,
 })
+const boxRef = ref()
+const { onLoop } = useRenderLoop()
+
+onLoop(({ delta, elapsed }) => {
+    if (boxRef.value) {
+        boxRef.value.rotation.y += delta
+        boxRef.value.rotation.z = elapsed * 0.7
+    }
+})
+const { hasFinishLoading, progress } = await useProgress()
 </script>
 <template>
-    <TresCanvas window-size>
+    <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
+        Загрузка {{ progress }}%
+    </div>
+    <div :class="[{ 'invisible': !hasFinishLoading }]">
+        <TresCanvas window-size alpha shadows>
             <TresPerspectiveCamera :position="cameraPosition" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
             <Suspense>
-            <FBXModel :path="model" />
+                <FBXModel :path="modelUrl"></FBXModel>
                 <template #fallback>
-                Идет загрузка модели
+                    <TresMesh :position-x="0" :position-y="0">
+                        <TresBoxGeometry :args="[10, 50, 50]" />
+                    </TresMesh>
                 </template>
             </Suspense>
-        <TresMesh ref="boxRef" :scale="new Vector3(0.01, 0.5, 0.5)" :position-x="200" :position-y="200"
-            @click="router.push('/promo/main/item/1')">
-            <TresBoxGeometry :args="[100, 100, 100]" />
+            <TresMesh :position-x="200" :position-y="200" @click="router.push('/promo/main/item/1')">
+                <TresBoxGeometry :args="[10, 50, 50]" />
                 <TresMeshNormalMaterial />
             </TresMesh>
             <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow />
             <TresAmbientLight :intensity="5" />
         </TresCanvas>
+    </div>
 </template>
+<style scoped>
+.invisible {
+    visibility: hidden;
+}
+.loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 2rem;
+    min-height: 100vh;
+}
+</style>