test smooth

front/src/assets/sidebar.scss

@@ -216,7 +216,11 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
 
             input[type=radio],
             input[type=checkbox] {
-                order: 10
+                order: 10;
+
+                &:checked + label {
+                    font-weight: bolder;
+                }
             }
 
             label {

front/src/components/Promo/load_models.vue

@@ -2,14 +2,12 @@
 import { onMounted, onUnmounted, reactive, ref, watch } from 'vue';
 import {
     Box3, Color, Group, Mesh,
-    MeshStandardMaterial, MeshBasicMaterial,
+    MeshStandardMaterial,
     Vector2, Vector3,
-    Quaternion, AdditiveBlending,
+    Quaternion, Euler, SRGBColorSpace
-    Euler, SRGBColorSpace, RingGeometry,
-    CircleGeometry,
 } from 'three';
 
-import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
+import { useTresContext, useSeek, useLoop } from '@tresjs/core';
 // @ts-ignore
 import { useGLTF } from '@tresjs/cientos'
 
@@ -25,7 +23,6 @@ import { useTimer } from '../../stores/timer';
 import { useRawData } from '../../stores/raw_data';
 import { useTimerHome } from '../../stores/timer_home';
 import { useItem } from '../../stores/item';
-import { hsl } from 'd3';
 
 const props = defineProps(['source', 'loaded_pan', 'push'])
 
@@ -38,7 +35,7 @@ const targetDistance = reactive({ max: 10, min: 0 })
 let sidebar_clickable = [] as PromoScene[]
 let sidebar_visible = [] as PromoScene[]
 
-const COUNT = 50
+const COUNT = 30
 type smooth = {
     value: Vector3 | Quaternion | undefined,
     count: number
@@ -272,22 +269,22 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
         if (el) {
             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.y = 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)
-            target_vector.setComponent(1, raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1)
 
-            // const quaternion = new Quaternion();
+            const quaternion = new Quaternion();
-            // quaternion.setFromEuler(new Euler(
+            quaternion.setFromEuler(test_euler);
-            //     -45 * 1 * (Math.PI / 180),
+            set_moveto(smooth_rotate, quaternion)
-            //     35 * 1 * (Math.PI / 180),
-            //     35 * 1 * (Math.PI / 180)
-            // ));
 
-            // set_moveto(smooth_rotate, quaternion)
+            // const d = raw_dataStore.data.max_distance * 0.5;
-
-            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)
@@ -295,7 +292,7 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
                 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
             ) {
-                set_moveto(smooth_target, new Vector3(lerp_vector.x, d, lerp_vector.z))
+                set_moveto(smooth_target, lerp_vector)
                 set_moveto(smooth_move, lerp_vector)
 
                 set_moveto(temp_smooth_target, target_vector)
@@ -324,44 +321,37 @@ onAfterRender(() => {
             }
         }
     })
-    const koef = (1 / COUNT) * 3
+    const koef = 0.2
-    const smoothy = [
+    const threshold = 2
-        {
+    if (smooth_move.value || smooth_target.value || smooth_rotate.value) {
-            el: smooth_target,
+        // Плавно изменяем позицию камеры
-            temp_el: temp_smooth_target,
+        camera.value?.position.lerp(smooth_target.value as Vector3, koef);
-            f: () => {
+
-                (controls.value as any).target.lerp(smooth_target.value as Vector3, 1 / smooth_target.count);
+        if (smooth_rotate.value) {
-            },
+            const currentRotation = new Quaternion().copy(camera.value.quaternion);
-        },
+            currentRotation.slerp(smooth_rotate.value, 0.5);
-        {
+            camera.value.quaternion.copy(currentRotation);
-            el: smooth_move,
+            // camera.value?.quaternion.slerp(smooth_rotate.value as Quaternion, 0.5);
-            temp_el: temp_smooth_move,
-            f: () => {
-                camera.value?.position.lerp(smooth_move.value as Vector3, 1 / smooth_move.count);
-            },
-        },
-        {
-            el: smooth_rotate,
-            f: () => {
-                camera.value?.quaternion.slerp(smooth_rotate.value as Quaternion, 1 / smooth_rotate.count);
             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)
+
         }
     }
-    ]
+
-    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)
-                }
-            }
-        }
-    });
 })
 
 const timer = useTimer()