From 44c0100d58089a6ffa585d8faf0d8475f3bbdb49 Mon Sep 17 00:00:00 2001 From: Kseninia Mikhaylova Date: Thu, 5 Sep 2024 10:25:53 +0300 Subject: [PATCH] move --- front/src/components/Promo/load_models.vue | 113 +++++++++++---------- front/src/constants.ts | 3 +- front/src/main.ts | 16 ++- 3 files changed, 74 insertions(+), 58 deletions(-) diff --git a/front/src/components/Promo/load_models.vue b/front/src/components/Promo/load_models.vue index 535e245..9ff828f 100644 --- a/front/src/components/Promo/load_models.vue +++ b/front/src/components/Promo/load_models.vue @@ -13,7 +13,7 @@ import { useGLTF } from '@tresjs/cientos' import Env from './env.vue' -import { IMAGE_URL, PROMOBG, SERVER_URL, } from '../../constants' +import { IMAGE_URL, PROMOBG, SERVER_URL, title, } from '../../constants' import { usePromoSidebar } from '../../stores/promo_sidebar'; import { usePromoScene } from '../../stores/promo_scene'; import { useClickable } from '../../stores/clickable'; @@ -106,9 +106,11 @@ const loadModels = async () => { loading_store.status = 'loading' process_loading.value = props.source - await raw_dataStore.load(props) raw_dataStore.data.loading = true + await raw_dataStore.load(props) + document.title = `${raw_dataStore.data.name} - ${title}` + loading_store.status = 'env' await setEnv() @@ -270,43 +272,44 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => { targetDistance.max = 10 targetDistance.min = 1 - const test_euler = new Euler( - -45 * 1 * (Math.PI / 180), - 35 * 1 * (Math.PI / 180), - 35 * 1 * (Math.PI / 180) - ) - const target_vector = new Vector3(); el.getWorldPosition(target_vector); - // target_vector.setComponent(1, raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1) + target_vector.setComponent(1, raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1) - const quaternion = new Quaternion(); - quaternion.setFromEuler(test_euler); - set_moveto(smooth_rotate, quaternion) + const d = raw_dataStore.data.max_distance * 0.5; + const lerp_vector = new Vector3( + ((camera.value?.position as Vector3).x + target_vector.x) * 0.5, + ((camera.value?.position as Vector3).y + target_vector.y) * 0.5, + ((camera.value?.position as Vector3).z + target_vector.z) * 0.5, + ) + lerp_vector.setComponent(1, d) + const multiply = new Vector3(1.5, 1.5, 0) - // const d = raw_dataStore.data.max_distance * 0.5; - const lerp_vector = new Vector3(0, 0, 0) - lerp_vector.lerpVectors(target_vector, camera.value?.position as Vector3, 0.5) - lerp_vector.setComponent(1, raw_dataStore.data.max_distance * 0.5) + const target_move = target_vector.multiply(multiply) + const lerp_move = lerp_vector.multiply(multiply) + console.log({ + target_vector, + target_move + }) if ( - camera.value?.position && camera.value?.position.distanceTo(lerp_vector) > raw_dataStore.data.max_distance * 0.5 || - camera.value?.position && camera.value?.position.distanceTo(target_vector) > 10 + camera.value?.position && camera.value?.position.distanceTo(lerp_move) > d || + camera.value?.position && camera.value?.position.distanceTo(target_move) > 10 ) { set_moveto(smooth_target, lerp_vector) - set_moveto(smooth_move, lerp_vector) + set_moveto(smooth_move, lerp_move) set_moveto(temp_smooth_target, target_vector) - set_moveto(temp_smooth_move, target_vector) + set_moveto(temp_smooth_move, target_move) } else { set_moveto(smooth_target, target_vector) - set_moveto(smooth_move, target_vector) + set_moveto(smooth_move, target_move) } } } }, { deep: true }) -const { onAfterRender } = useLoop() -onAfterRender(() => { +const { onBeforeRender } = useLoop() +onBeforeRender(() => { clickable_refs.value.map(el => { if (el.value[0] && el.value[0].children) { el.value[0].children[0].lookAt(camera.value?.position); @@ -321,37 +324,41 @@ onAfterRender(() => { } } }) - const koef = 0.2 - const threshold = 2 - if (smooth_move.value || smooth_target.value || smooth_rotate.value) { - // Плавно изменяем позицию камеры - camera.value?.position.lerp(smooth_target.value as Vector3, koef); - - if (smooth_rotate.value) { - const currentRotation = new Quaternion().copy(camera.value.quaternion); - currentRotation.slerp(smooth_rotate.value, 0.5); - camera.value.quaternion.copy(currentRotation); - // camera.value?.quaternion.slerp(smooth_rotate.value as Quaternion, 0.5); - camera.value?.quaternion.normalize() - console.log(camera.value?.quaternion.angleTo(smooth_rotate.value as Quaternion)) + const koef = (1 / COUNT) * 3 + const smoothy = [ + { + el: smooth_target, + temp_el: temp_smooth_target, + f: () => { + (controls.value as any).target.lerp(smooth_target.value as Vector3, koef); + (controls.value as any).update() + }, + }, + { + el: smooth_move, + temp_el: temp_smooth_move, + f: () => { + camera.value?.position.lerp(smooth_move.value as Vector3, koef); + camera.value?.updateMatrixWorld() + }, + }, + ] + smoothy.forEach(element => { + if (element.el.value) { + timer.resetTimer(); + element.f() + element.el.count -= 1 + if (element.el.count == 1) { + set_moveto(element.el, undefined) + if (element.temp_el && element.temp_el.value) { + set_moveto(element.el, element.temp_el.value) + set_moveto(element.temp_el, undefined) + } + } } - - // Плавно изменяем целевую точку контроллера - controls.value.target.lerp(smooth_target.value, koef); - controls.value.update(); // Обновляем контроллер - - // Проверка на достижение целевой позиции - if ( - camera.value.position.distanceTo(smooth_move.value || smooth_target.value) < threshold - // && camera.value?.quaternion.angleTo(smooth_rotate.value as Quaternion) < Math.PI / 8 - ) { - smooth_move.value = smooth_target.value = smooth_rotate.value = undefined - if (temp_smooth_move) set_moveto(smooth_move, temp_smooth_move.value) - if (temp_smooth_target) set_moveto(smooth_target, temp_smooth_target.value) - - } - } - + }); + (controls.value as any).update() + camera.value?.updateMatrixWorld() }) const timer = useTimer() diff --git a/front/src/constants.ts b/front/src/constants.ts index 8ab2172..50244f4 100644 --- a/front/src/constants.ts +++ b/front/src/constants.ts @@ -1,4 +1,5 @@ export const SERVER_URL = import.meta.env.VITE_SERVER_URL ?? window.location.origin export const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? window.location.origin -export const PROMOBG='#ccc' \ No newline at end of file +export const PROMOBG = '#ccc' +export const title = 'Проекты Кустарщины' \ No newline at end of file diff --git a/front/src/main.ts b/front/src/main.ts index 3bb9281..d6701d4 100644 --- a/front/src/main.ts +++ b/front/src/main.ts @@ -8,12 +8,18 @@ import App from './App.vue' import Main from './components/Main/index.vue' import Gallery from './components/Gallery/index.vue' import Promo from './components/Promo/index.vue' +import { title } from './constants' const routes = [ - { path: '/', component: Main, name: 'home_no' }, - { path: '/:item', component: Main, name: 'main' }, - { path: '/:item/gallery', component: Gallery, name: 'gallery' }, - { path: '/:item/:target', component: Promo, name: 'scene' }, + { + path: '/', + component: Main, + name: 'home_no', + meta: { title: title } + }, + { path: '/:item', component: Main, name: 'main', meta: { title: title } }, + { path: '/:item/gallery', component: Gallery, name: 'gallery', meta: { title: `Галерея - ${title}` } }, + { path: '/:item/:target', component: Promo, name: 'scene', meta: { title: `Модель ${title}` } }, ] const router = createRouter({ @@ -22,6 +28,8 @@ const router = createRouter({ }) router.beforeEach((to, from, next) => { + document.title = to.meta && to.meta.title ? to.meta.title.toString() : title; + console.log('Navigating from', from.fullPath, 'to', to.fullPath); next(); });