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))
-        }
-
-        // Плавно изменяем целевую точку контроллера
-        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)
-
+    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 as any).update()
+    camera.value?.updateMatrixWorld()
 })
 
 const timer = useTimer()

front/src/constants.ts

@@ -2,3 +2,4 @@ export const SERVER_URL = import.meta.env.VITE_SERVER_URL ?? window.location.ori
 export const IMAGE_URL = import.meta.env.VITE_IMAGE_URL ?? window.location.origin
 
 export const PROMOBG = '#ccc'
+export const title = 'Проекты Кустарщины'

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();
 });