From f95be5c1f3360ae073d556735c23b436be002d9a Mon Sep 17 00:00:00 2001 From: aarizona Date: Thu, 29 Aug 2024 20:53:26 +0300 Subject: [PATCH] refactoring --- front/src/components/Promo/load_models.vue | 121 +++++++++++---------- front/src/stores/loading.ts | 1 + 2 files changed, 62 insertions(+), 60 deletions(-) diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index 76e18d8..03e31fd 100644 --- a/front/src/components/Promo/load_models.vue +++ b/front/src/components/Promo/load_models.vue @@ -29,9 +29,11 @@ const CAM_MOVETO_COUNT = 100; const models = ref([]) const clickable_items = ref([]) const clickable_refs = ref([]) +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; const controls_targetto_count = ref(CON_MOVETO_COUNT) @@ -56,14 +58,7 @@ const pointerTexture = await useTexture({ map: '/pointer_texture.png' }) -const loadModels = 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 - +const setEnv = async () => { 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 sidebar_visible = [] as PromoScene[] - clickable_items.value = [] +const makeGround = () => { + const mesh = { + 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 = { - 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 }) + makeGround() } 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).maxDistance = def_distance.max; + (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_data.min_distance * 0.5 : raw_data.min_distance; + (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, - def_distance.max * 0.5, - def_distance.max * 0.5 + raw_data.max_distance * 0.5, + raw_data.max_distance * 0.5, + raw_data.max_distance * 0.5 ); clickable.list.forEach(element => { diff --git a/front/src/stores/loading.ts b/front/src/stores/loading.ts index 9c058f5..0e582e8 100644 --- a/front/src/stores/loading.ts +++ b/front/src/stores/loading.ts @@ -11,6 +11,7 @@ const lines = { clickable: "Расставляем кликабельные элементы", boxes: "Считаем коробки", other: "Делаем еще что-то важное", + loading: "Получаем данные", } export const useLoading = defineStore('loading', { state: () => {