front/src/components/Promo/load_models.vue

@@ -29,9 +29,11 @@ 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 def_distance = reactive({ max: 10, min: 1 })
 const process_loading = ref(null)
+let addTexture: any
 
 const controls_targetto = ref() as Ref<Vector3 | undefined>;
 const controls_targetto_count = ref(CON_MOVETO_COUNT)
@@ -56,14 +58,7 @@ const pointerTexture = await useTexture({
     map: '/pointer_texture.png'
 })
 
-const loadModels = async () => {
+const setEnv = async () => {
-    process_loading.value = props.source
-    await raw_data.load(props)
-    loading_store.status = 'other'
-
-    def_distance.max = raw_data.max_distance
-    def_distance.min = raw_data.min_distance
-
     envVars.focus = raw_data.max_distance * 0.5
     if (raw_data.env) {
         Object.assign(envVars, raw_data.env)
@@ -76,8 +71,21 @@ const loadModels = async () => {
         envVars.clear_color = PROMOBG
     }
 
-    loading_store.status = 'env'
+    let c = new Color()
+    if (envVars.clear_color) {
+        c.set(envVars.clear_color)
+    } else {
+        renderer.value.getClearColor(c)
+    }
+    const tex = {} as any
+    if (envVars.env_displacementmap) { tex.displacementMap = `${IMAGE_URL}/${envVars.env_displacementmap}` }
+    if (envVars.env_normalmap) { tex.normalMap = `${IMAGE_URL}/${envVars.env_normalmap}` }
+    if (Object.keys(tex).length > 0) {
+        addTexture = await useTexture(tex)
+    }
+}
 
+const setControls = () => {
     if (!controls.value) return;
     controls.value.enabled = false;
     (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_data.min_distance * 0.5 : raw_data.min_distance;
@@ -93,10 +101,43 @@ const loadModels = async () => {
 
     (controls.value as any)._needsUpdate = true;
     (controls.value as any).update()
+}
 
-    const sidebar_clickable = [] as PromoScene[]
+const makeGround = () => {
-    const sidebar_visible = [] as PromoScene[]
+    const mesh = {
-    clickable_items.value = []
+        color: new Color(envVars.clear_color).offsetHSL(0, 0.5, -0.33),
+        displacementScale: envVars.focus * 0.33,
+        roughness: 100,
+        side: DoubleSide
+    } as MeshStandardMaterialParameters
+    if (envVars.env_displacementmap) {
+        mesh.displacementMap = addTexture.displacementMap
+    } else {
+        mesh.displacementMap = groundTexture.displacementMap
+    }
+    if (envVars.env_normalmap) {
+        mesh.normalMap = addTexture.normalMap
+    }
+    const ground = new Mesh(
+        new PlaneGeometry(envVars.focus * 7, envVars.focus * 7, 1024, 1024),
+        new MeshStandardMaterial(mesh)
+    )
+    ground.position.y = -0.33 * envVars.focus
+    ground.rotateX(-Math.PI / 2)
+    ground.name = "ground"
+    models.value.push({ name: 'ground', modelFile: ground })
+}
+
+const loadModels = async () => {
+    loading_store.status = 'loading'
+    process_loading.value = props.source
+    await raw_data.load(props)
+
+    loading_store.status = 'env'
+    await setEnv()
+
+    loading_store.status = 'other'
+    setControls()
 
     sidebar_scene.setName({ name: raw_data.name, description: raw_data.name })
 
@@ -125,8 +166,6 @@ const loadModels = async () => {
             )
             item.modelFile.children[0].updateMatrixWorld(true)
         }
-
-        item.modelFile.updateMatrixWorld(true)
         models.value.push(item)
 
         const res = await fetch(`${SERVER_URL}/api/obj/clickable/?source=${element.id}`)
@@ -139,46 +178,9 @@ const loadModels = async () => {
     }
     sidebar_scene.setVisible(sidebar_visible)
 
-    if (process_loading.value !== props.source) return
-
-    let c = new Color()
-    if (envVars.clear_color) {
-        c.set(envVars.clear_color)
-    } else {
-        renderer.value.getClearColor(c)
-    }
-    const tex = {} as any
-    if (envVars.env_displacementmap) { tex.displacementMap = `${IMAGE_URL}/${envVars.env_displacementmap}` }
-    if (envVars.env_normalmap) { tex.normalMap = `${IMAGE_URL}/${envVars.env_normalmap}` }
-    let addTexture: any
-    if (Object.keys(tex).length > 0) {
-        addTexture = await useTexture(tex)
-    }
-
     if (!models.value.find(el => el.name == 'ground')) {
         loading_store.status = 'ground'
-        const mesh = {
+        makeGround()
-            color: c.offsetHSL(0, 0.5, -0.33),
-            displacementScale: envVars.focus * 0.33,
-            roughness: 100,
-            side: DoubleSide
-        } as MeshStandardMaterialParameters
-        if (envVars.env_displacementmap) {
-            mesh.displacementMap = addTexture.displacementMap
-        } else {
-            mesh.displacementMap = groundTexture.displacementMap
-        }
-        if (envVars.env_normalmap) {
-            mesh.normalMap = addTexture.normalMap
-        }
-        const ground = new Mesh(
-            new PlaneGeometry(envVars.focus * 7, envVars.focus * 7, 1024, 1024),
-            new MeshStandardMaterial(mesh)
-        )
-        ground.position.y = -0.33 * envVars.focus
-        ground.rotateX(-Math.PI / 2)
-        ground.name = "ground"
-        models.value.push({ name: 'ground', modelFile: ground })
     }
 
     for (let index = 0; index < clickable.list.length; index++) {
@@ -209,8 +211,7 @@ const loadModels = async () => {
 
             point.position.set(world_position.x, p * 3, world_position.z * 2)
             point.name = `${element.id}_clickable`
-            point.updateMatrixWorld()
+            
-
             if (clickable_items.value.find(el => el.name == point.name)) continue
             clickable_items.value.push(point)
             clickable_refs.value.push(ref(`${element.id}_clickable`))
@@ -251,13 +252,13 @@ const loadModels = async () => {
 }
 
 const gotoCenterAndDistance = () => {
-    (controls.value as any).minDistance = mobileAndTabletCheck() ? def_distance.min * 0.5 : def_distance.min;
+    (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_data.min_distance * 0.5 : raw_data.min_distance;
-    (controls.value as any).maxDistance = def_distance.max;
+    (controls.value as any).maxDistance = raw_data.max_distance;
     controls_targetto.value = new Vector3(0, 0, 0);
     camera_moveto.value = new Vector3(
-        def_distance.max * 0.5,
+        raw_data.max_distance * 0.5,
-        def_distance.max * 0.5,
+        raw_data.max_distance * 0.5,
-        def_distance.max * 0.5
+        raw_data.max_distance * 0.5
     );
 
     clickable.list.forEach(element => {

front/src/stores/loading.ts

@@ -11,6 +11,7 @@ const lines = {
     clickable: "Расставляем кликабельные элементы",
     boxes: "Считаем коробки",
     other: "Делаем еще что-то важное",
+    loading: "Получаем данные",
 }
 export const useLoading = defineStore('loading', {
     state: () => {