front/src/components/Promo/load_models.vue

@@ -15,6 +15,7 @@ import { IMAGE_URL, PROMOBG, SERVER_URL, } from '../../constants'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { usePromoScene } from '../../stores/promo_scene';
 import { useClickable } from '../../stores/clickable';
+import { useLoading } from '../../stores/loading';
 import { mobileAndTabletCheck } from '../../helpers';
 
 const props = defineProps(['source', 'loaded', 'loaded_pan'])
@@ -27,6 +28,7 @@ const envVars = reactive({}) as EnvVars
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
 const clickable = useClickable()
+const loading_store = useLoading()
 
 const { controls, camera, scene, raycaster, renderer } = useTresContext()
 const { pause, resume } = useLoop()
@@ -57,6 +59,7 @@ setInterval(() => {
 const loadModels = async () => {
     const res = await fetch(`${SERVER_URL}/api/obj/scene/${props.source}`)
     const raw_data = await res.json() as scene3D
+    loading_store.status = 'other'
 
     envVars.focus = raw_data.max_distance * 0.5
     if (raw_data.env) {
@@ -70,7 +73,7 @@ const loadModels = async () => {
         envVars.clear_color = PROMOBG
     }
 
-
+    loading_store.status = 'env'
     const data = raw_data.elements
     if (!controls.value) return;
 
@@ -89,7 +92,9 @@ const loadModels = async () => {
     const sidebar_items = [] as PromoScene[]
     clickable_items.value = []
 
+    loading_store.status = 'model'
     for (let index = 0; index < data.length; index++) {
+        loading_store.count = index
         const element = data[index];
         const item = {} as model3DType
 
@@ -132,6 +137,7 @@ const loadModels = async () => {
     }
 
     if (!models.value.find(el => el.name == 'ground')) {
+        loading_store.status = 'ground'
         const mesh = {
             color: c.offsetHSL(0, 0.5, -0.33),
             displacementScale: envVars.focus * 0.33,
@@ -157,6 +163,7 @@ const loadModels = async () => {
     }
 
     for (let index = 0; index < clickable.list.length; index++) {
+        loading_store.status = 'clickable'
         const element = clickable.list[index];
         const find_element = seekByName(scene.value, element.object_name)
         if (!find_element) continue
@@ -187,6 +194,7 @@ const loadModels = async () => {
     sidebar_scene.name = raw_data.name;
     sidebar_scene.setData(sidebar_items)
 
+    loading_store.status = 'ищчуы'
     const box = new Box3();
     models.value.forEach(element => {
         if (element.name !== 'ground') {

front/src/components/Promo/main.vue

@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import { useRoute } from 'vue-router';
 
 import { Vector3 } from 'three';
-import { TresCanvas } from '@tresjs/core';
+import { TresCanvas, useLoader } from '@tresjs/core';
 import { OrbitControls, Stats } from '@tresjs/cientos'
 import '@tresjs/leches/styles'
 
@@ -12,6 +12,7 @@ import LoadModels from './load_models.vue'
 import Sidebar from './sidebar.vue'
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { PROMOBG } from '../../constants';
+import { useLoading } from '../../stores/loading';
 
 const minPan = ref(new Vector3(-2, -2, -2))
 const maxPan = ref(new Vector3(2, 2, 2))
@@ -29,6 +30,7 @@ const loadedPan = (max: any, min: any) => {
     minPan.value = min
 }
 const sidebar = usePromoSidebar()
+const loading_store = useLoading()
 
 const camera = ref()
 const cameraPosition = ref([1, 1, 1]) as unknown as Ref<Vector3>
@@ -66,10 +68,14 @@ const sidebarFunc = () => {
 </script>
 <template>
     <div>
+        <div v-if="models_loading"
+            style="position: absolute;    z-index: 10;    font-size: 6rem;    top: 50%;    left: 50%;">
+            {{loading_store.getStatus()}}
+        </div>
         <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
             <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"
                 :shadows="false">
-                <Stats v-if=false />
+                <Stats />
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>

front/src/stores/loading.ts

@@ -0,0 +1,30 @@
+import { defineStore } from 'pinia'
+interface state {
+    loading: boolean,
+    status: string,
+    count?: number
+}
+const lines = {
+    model: "Загружаем модель",
+    ground: "Готовим землю",
+    env: "Настраиваем окружение",
+    clickable: "Расставляем кликабельные элементы",
+    boxes: "Считаем коробки",
+    other: "Делаем еще что-то важное",
+}
+export const useLoading = defineStore('loading', {
+    state: () => {
+        return {
+            loading: false,
+            status: ""
+        } as state
+    },
+    actions: {
+        getStatus() {
+            if (this.status == 'model') {
+                return lines[this.status] + ' ' + this.count
+            }
+            return lines[this.status]
+        }
+    }
+})