loading

front/src/components/Promo/load_models.vue

@@ -22,17 +22,17 @@ import { mobileAndTabletCheck } from '../../helpers';
 import { useTimer } from '../../stores/timer';
 import { useRawData } from '../../stores/raw_data';
 
-const props = defineProps(['source', 'loaded', 'loaded_pan'])
+const props = defineProps(['source', 'loaded_pan'])
 const CON_MOVETO_COUNT = 150;
 const CAM_MOVETO_COUNT = 100;
 
 const models = ref<model3DType[]>([])
 const clickable_items = ref<any[]>([])
 const clickable_refs = ref<any[]>([])
-const sidebar_clickable = [] as PromoScene[]
-const sidebar_visible = [] as PromoScene[]
 const envVars = reactive({}) as EnvVars
 const process_loading = ref(null)
+let sidebar_clickable = [] as PromoScene[]
+let sidebar_visible = [] as PromoScene[]
 let addTexture: any
 
 const controls_targetto = ref() as Ref<Vector3 | undefined>;
@@ -127,11 +127,19 @@ const makeGround = () => {
     ground.name = "ground"
     models.value.push({ name: 'ground', modelFile: ground })
 }
-
+const clearValues = () => {
+    clickable_items.value = []
+    clickable_refs.value = []
+    sidebar_clickable = []
+    sidebar_visible = []
+}
 const loadModels = async () => {
+    clearValues()
+    
     loading_store.status = 'loading'
     process_loading.value = props.source
     await raw_data.load(props)
+    raw_data.loading = true
 
     loading_store.status = 'env'
     await setEnv()
@@ -239,9 +247,9 @@ const loadModels = async () => {
     props.loaded_pan(
         new Vector3(box_size.x * 0.5, box_size.y * 0.5, box_size.z * 0.5),
         new Vector3(box_size.x * -0.25, box_size.y * -0.25, box_size.z * -0.25),
-    )
+    );
-    controls.value.enabled = true;
+    (controls.value as any).enabled = true;
-    props.loaded(false)
+    raw_data.loading = false;
 
     timer.startTimer()
     if (controls.value && (controls.value as any).autoRotate) {

front/src/components/Promo/main.vue

@@ -14,6 +14,7 @@ import { PROMOBG } from '../../constants';
 import { usePromoSidebar } from '../../stores/promo_sidebar';
 import { useLoading } from '../../stores/loading';
 import { useItem } from '../../stores/item';
+import { useRawData } from '../../stores/raw_data';
 
 const minPan = ref(new Vector3(-2, -2, -2))
 const maxPan = ref(new Vector3(2, 2, 2))
@@ -41,20 +42,16 @@ const controlsState = reactive({
     maxPolarAngle: (Math.PI / 2) - 0.07,
     minAzimuthAngle: (Math.PI / 2) - 0.20,
 })
-const models_loading = ref(true)
-const set_model_load_status = (status: boolean) => {
-    models_loading.value = status
-}
 
+const raw_data = useRawData()
 const route = useRoute()
 
 const source = ref(route.params.target)
 watch(() => route.params.target, () => {
     let t = '1'
-    if (route.params.target) t = route.params.target
+    if (route.params.target) t = route.params.target as string
     if (source.value !== t) {
         source.value = t
-        models_loading.value = true
         sidebar.close()
     }
 },)
@@ -76,19 +73,18 @@ onMounted(() => {
 </script>
 <template>
     <div>
-        <div v-if="models_loading"
+        <div v-if="raw_data.loading"
             style="position: absolute;z-index: 10;font-size: 6rem;text-align: center;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
             {{ loading_store.getStatus() }}
         </div>
-        <div :class="[{ 'loading': models_loading }, 'canvas-wrapper']">
+        <div :class="[{ 'loading': raw_data.loading }, 'canvas-wrapper']">
             <TresCanvas window-size :alpha="false" power-preference="high-performance" :clear-color="PROMOBG"
                 :shadows="false">
                 <Stats />
                 <TresPerspectiveCamera :position="cameraPosition" ref="camera" />
                 <OrbitControls v-bind="controlsState" @change="onChange" make-default />
                 <Suspense>
-                    <LoadModels :source="source" :loaded="set_model_load_status" :loaded_pan="loadedPan"
+                    <LoadModels :source="source" :loaded_pan="loadedPan" :key="source as string" />
-                        :key="source" />
                 </Suspense>
             </TresCanvas>
             <div class="homelink" :class="[{ open: sidebar.is_open }]">

front/src/index.d.ts

@@ -23,6 +23,7 @@ interface scene3D {
         env_normalmap?: string
         clear_color?: string
     }
+    loading?: boolean
 }
 interface element3DType {
     id: number