From e7ae7243af92d69ccf8a2c9b270763ba133defd1 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Tue, 27 Aug 2024 10:11:24 +0300 Subject: [PATCH] pin --- front/src/components/Promo/load_models.vue | 32 ++++++++++++++-------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index 3aa6fdb..42e4505 100644 --- a/front/src/components/Promo/load_models.vue +++ b/front/src/components/Promo/load_models.vue @@ -4,10 +4,7 @@ import { Box3, Color, DoubleSide, Group, Mesh, PlaneGeometry, MeshStandardMaterial, MeshStandardMaterialParameters, Vector2, Vector3, - Object3D, - MeshPhongMaterial, - CircleGeometry, - MeshBasicMaterial, + CircleGeometry, MeshBasicMaterial, } from 'three'; import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core'; @@ -28,6 +25,7 @@ const models = ref([]) const clickable_items = ref([]) const clickable_refs = ref([]) const envVars = reactive({}) as EnvVars +const def_distance = reactive({ max: 10, min: 1 }) const sidebar = usePromoSidebar(); const sidebar_scene = usePromoScene(); @@ -70,6 +68,9 @@ const loadModels = async () => { const raw_data = await res.json() as scene3D 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) @@ -189,11 +190,13 @@ const loadModels = async () => { const p = raw_data.min_distance * 0.05 - const point = new Mesh( + const point_mesh = new Mesh( new CircleGeometry(p, 32), new MeshBasicMaterial({ map: pointerTexture.map }) ) - point.rotateX(-0.5 * Math.PI) + point_mesh.rotateX(-0.5 * Math.PI) + const point = new Group() + point.add(point_mesh) point.position.set(world_position.x, p * 3, world_position.z * 2) point.name = `${element.id}_clickable` point.updateMatrixWorld() @@ -237,7 +240,9 @@ const loadModels = async () => { const { onAfterRender } = useLoop() onAfterRender(() => { clickable_refs.value.map(el => { - el.value[0].lookAt(camera.value?.position) + if (el.value[0] && el.value[0].children) { + el.value[0].children[0].lookAt(camera.value?.position) + } }) if (controls.value) { if (timer.value == 0) { @@ -253,7 +258,6 @@ const openSidebar = (id: number) => { const target = clickable.list.find(el => el.id == id) if (!target) return const el = seekByName(scene.value, `${id}_clickable`); - console.log(el) if (el) { (controls.value as any).maxDistance = 10; (controls.value as any).minDistance = 1; @@ -261,8 +265,6 @@ const openSidebar = (id: number) => { el.getWorldPosition(target_vector); (controls.value as any).target = target_vector; - console.log(target_vector) - // (camera.value as any).lookAt(el) } } @@ -276,6 +278,13 @@ watch(() => props.source, () => { loadModels() }) +watch(() => sidebar.is_open, () => { + if (sidebar.is_open == false) { + (controls.value as any).minDistance = mobileAndTabletCheck() ? def_distance.min * 0.5 : def_distance.min; + (controls.value as any).maxDistance = def_distance.max; + } +}) + onMounted(() => { document.addEventListener('click', clickEvent) @@ -317,7 +326,8 @@ const clickEvent = (event: MouseEvent) => { pointer.y = y raycaster.value.setFromCamera(new Vector2(pointer.x, pointer.y), camera.value); - const intersects = raycaster.value.intersectObjects(seekAllByName(scene.value, '_clickable')); + const clickable_objects = seekAllByName(scene.value, '_clickable'); + const intersects = raycaster.value.intersectObjects(clickable_objects); const names = intersects.map(el => (el.object.parent ? el.object.parent.name : el.object.name) ?? false).filter(Boolean) if (names.length) { openSidebar(parseInt(names[0].replace('_clickable', '')))