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>
-  <RouterView />
+  <Suspense>
+    <RouterView />
+  </Suspense>
 </template>

front/src/components/Promo/main.vue

@@ -1,21 +1,21 @@
 <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()
 
-const minPan = new Vector3(-210,0,-80);
-const maxPan = new Vector3(210,0,100);
+const minPan = new Vector3(-210, 0, -80);
+const maxPan = new Vector3(210, 0, 100);
 const _v = new Vector3();
 
 const onChange = (e) => {
     _v.copy(e._target);
-    e._target.clamp(minPan,maxPan);
+    e._target.clamp(minPan, maxPan);
     _v.sub(e._target);
     e._camera.position.sub(_v);
 }
@@ -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>
-        <TresPerspectiveCamera :position="cameraPosition" />
-        <CameraControls v-bind="controlsState" @change="onChange" make-default />
-        <Suspense>
-            <FBXModel :path="model" />
-            <template #fallback>
-                Идет загрузка модели
-            </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]" />
-            <TresMeshNormalMaterial />
-        </TresMesh>
-        <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow />
-        <TresAmbientLight :intensity="5" />
-    </TresCanvas>
+    <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="modelUrl"></FBXModel>
+                <template #fallback>
+                    <TresMesh :position-x="0" :position-y="0">
+                        <TresBoxGeometry :args="[10, 50, 50]" />
+                    </TresMesh>
+                </template>
+            </Suspense>
+            <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>