move test

front/src/components/Promo/load_models.vue

@@ -22,27 +22,26 @@ import { useLoading } from '../../stores/loading';
 import { mobileAndTabletCheck } from '../../helpers';
 import { useTimer } from '../../stores/timer';
 import { useRawData } from '../../stores/raw_data';
-import { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
 
 const props = defineProps(['source', 'loaded_pan'])
-const CON_MOVETO_COUNT = 150;
-const CAM_MOVETO_COUNT = 10;
 
 const models = ref<model3DType[]>([])
 const clickable_items = ref<any[]>([])
 const clickable_refs = ref<any[]>([])
 const envVars = reactive({}) as EnvVars
 const process_loading = ref(null)
+const targetDistance = reactive({ max: 10, min: 0 })
 let sidebar_clickable = [] as PromoScene[]
 let sidebar_visible = [] as PromoScene[]
 let addTexture: any
 
+const COUNT = 100
 const controls_targetto = ref() as Ref<Vector3 | undefined>;
-const controls_targetto_count = ref(CON_MOVETO_COUNT)
+const controls_targetto_count = ref(COUNT)
 const camera_moveto = ref() as Ref<Vector3 | undefined>;
-const camera_moveto_count = ref(CON_MOVETO_COUNT)
+const camera_moveto_count = ref(COUNT)
 const camera_rotatetoto = ref() as Ref<Quaternion | undefined>;
-const camera_rotatetoto_count = ref(CAM_MOVETO_COUNT)
+const camera_rotatetoto_count = ref(COUNT)
 
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
@@ -90,14 +89,13 @@ const setEnv = async () => {
 const setControls = () => {
     if (!controls.value) return;
     controls.value.enabled = false;
-    (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
+    targetDistance.max = raw_dataStore.data.max_distance;
+    targetDistance.min = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
+    // (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
     (controls.value as any).maxDistance = raw_dataStore.data.max_distance;
 
-    camera.value?.position.set(
+    const d = targetDistance.max * 0.5
-        (controls.value as any).maxDistance * 0.5,
+    camera.value?.position.set(d, d, d);
-        (controls.value as any).maxDistance * 0.5,
-        (controls.value as any).maxDistance * 0.5
-    );
     (controls.value as any).target = new Vector3(0, 0, 0);
     (controls.value as any).autoRotate = false;
 
@@ -268,8 +266,8 @@ const loadModels = async () => {
 }
 
 const gotoCenterAndDistance = () => {
-    (controls.value as any).minDistance = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
+    targetDistance.min = mobileAndTabletCheck() ? raw_dataStore.data.min_distance * 0.5 : raw_dataStore.data.min_distance;
-    (controls.value as any).maxDistance = raw_dataStore.data.max_distance;
+    targetDistance.max = raw_dataStore.data.max_distance;
     controls_targetto.value = new Vector3(0, 0, 0);
     camera_moveto.value = new Vector3(
         raw_dataStore.data.max_distance * 0.5,
@@ -305,20 +303,19 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
         if (!target) return
         const el = seekByName(scene.value, `${sidebar.id_clickable}_clickable`);
         if (el) {
-            (controls.value as any).maxDistance = 10;
+            targetDistance.max = 10
-            (controls.value as any).minDistance = 1;
+            targetDistance.min = 1
             const target_vector = new Vector3();
 
             el.getWorldPosition(target_vector);
+            target_vector.y = 10;
             controls_targetto.value = target_vector;
 
-            const distance = (controls.value as any).target.distanceTo(target_vector)
-            controls_targetto_count.value = parseInt(distance) * 10
-
             const quaternion = new Quaternion();
             quaternion.setFromAxisAngle(new Vector3(1, 0, 0), -45 * 4 * (Math.PI / 180));
-            // camera.value?.applyQuaternion(quaternion)
             camera_rotatetoto.value = quaternion
+            camera.value.rotation.z += Math.PI/2
+            camera_moveto.value = target_vector;
         }
     }
 }, { deep: true })
@@ -331,47 +328,45 @@ onAfterRender(() => {
 
             const dis_to_cam = camera.value?.position.distanceTo(el.value[0].position);
             if (dis_to_cam) {
-                // console.log(dis_to_cam)
                 const scaling = (1 * dis_to_cam) / 100
                 el.value[0].children[0].scale.set(scaling, scaling, scaling);
                 el.value[0].updateMatrixWorld()
             }
         }
     })
-    if (controls.value) {
+    const koef = 0.02
-        if (timer.seconds_left == 0) {
-            (controls.value as any).update();
-        }
-    }
     if (controls_targetto.value) {
         timer.stopTimer();
-        (controls.value as any).target.lerp(controls_targetto.value, 0.01);
+        (controls.value as any).target.lerp(controls_targetto.value, koef);
         controls_targetto_count.value -= 1
         if (controls_targetto_count.value == 0) {
-            controls_targetto_count.value = CON_MOVETO_COUNT
+            controls_targetto_count.value = COUNT;
-            controls_targetto.value = undefined
+            controls_targetto.value = undefined;
         }
-        (controls.value as any).update()
     }
     if (camera_moveto.value) {
         timer.stopTimer();
-        camera.value?.position.lerp(camera_moveto.value, 0.01);
+        camera.value?.position.lerp(camera_moveto.value, koef);
         camera_moveto_count.value -= 1
         if (camera_moveto_count.value == 0) {
-            camera_moveto_count.value = CON_MOVETO_COUNT
+            camera_moveto.value = undefined;
-            camera_moveto.value = undefined
+            camera_moveto_count.value = COUNT;
+            
+            // (controls.value as any).maxDistance = targetDistance.max;
+            // (controls.value as any).minDistance = targetDistance.min;
         }
     }
-    if (camera_rotatetoto.value && !controls_targetto.value) {
+    if (!camera_moveto.value && !controls_targetto.value && camera_rotatetoto.value) {
         timer.stopTimer();
-        camera.value?.quaternion.slerp(camera_rotatetoto.value, 0.01);
+        camera.value?.quaternion.slerp(camera_rotatetoto.value, koef);
         // camera.value?.quaternion.normalize();
         camera_rotatetoto_count.value -= 1;
         if (camera_rotatetoto_count.value == 0) {
-            camera_rotatetoto_count.value = CAM_MOVETO_COUNT
+            camera_rotatetoto_count.value = COUNT;
             camera_rotatetoto.value = undefined
         }
     }
+    (controls.value as any).update()
 })
 
 const timer = useTimer()
@@ -411,6 +406,7 @@ const clickEvent = (event: MouseEvent) => {
         .filter(Boolean)
     if (names.length) {
         sidebar.open(parseInt(names[0].replace('_clickable', '')))
+        sidebar.toggleAccordion('clickable')
     }
 }
 const timerEvent = ['click', 'contextmenu', 'mousedown', 'mouseup', 'touchstart', 'touchend', 'touchmove']

front/src/components/sidebar.vue

@@ -13,6 +13,11 @@ const clickable_obj = ref()
 watch(clickable_obj, () => {
     sidebar.open(clickable_obj.value);
 })
+watch(() => sidebar.id_clickable, () => {
+    if (sidebar.is_open) {
+        clickable_obj.value = sidebar.id_clickable
+    }
+})
 </script>
 <template>
     <div class="sidebar" :class="[{ 'open': sidebar.is_open }]">

front/src/stores/promo_sidebar.ts

@@ -43,15 +43,19 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
                 this.is_open = false
             }
         },
-        toggleAccordion(name: string) {
+        toggleAccordion(name: string, newState = null) {
             if (name == 'obj' && this.accordions.includes('clickable')) this.toggleAccordion('clickable')
             if (name == 'clickable' && this.accordions.includes('obj')) this.toggleAccordion('obj')
 
             if (this.accordions.includes(name)) {
+                if (newState == false || newState == null) {
                     this.accordions.splice(this.accordions.indexOf(name), 1)
+                }
             } else {
+                if (newState == true || newState == null) {
                     this.accordions.push(name)
                 }
+            }
 
         },
         isAccOpen(name: string) {