front/src/components/Promo/load_models.vue

@@ -5,6 +5,7 @@ import {
     MeshStandardMaterial, MeshStandardMaterialParameters,
     Vector2, Vector3,
     CircleGeometry, MeshBasicMaterial,
+    Quaternion,
 } from 'three';
 
 import { useTresContext, useSeek, useTexture, useLoop } from '@tresjs/core';
@@ -21,14 +22,22 @@ import { mobileAndTabletCheck } from '../../helpers';
 import { useTimer } from '../../stores/timer';
 
 const props = defineProps(['source', 'loaded', 'loaded_pan'])
+const CON_MOVETO_COUNT = 150;
+const CAM_MOVETO_COUNT = 100;
 
 const models = ref<model3DType[]>([])
 const clickable_items = ref<any[]>([])
 const clickable_refs = ref<any[]>([])
 const envVars = reactive({}) as EnvVars
 const def_distance = reactive({ max: 10, min: 1 })
+const controls_targetto = ref() as Ref<Vector3 | undefined>;
+const controls_targetto_count = ref(CON_MOVETO_COUNT)
 const camera_moveto = ref() as Ref<Vector3 | undefined>;
-const camera_moveto_count = ref(100)
+const camera_moveto_count = ref(CON_MOVETO_COUNT)
+
+const camera_rotatetoto = ref() as Ref<Quaternion | undefined>;
+const camera_rotatetoto_count = ref(CAM_MOVETO_COUNT)
+
 
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
@@ -220,6 +229,17 @@ const loadModels = async () => {
     }
 }
 
+const gotoCenterAndDistance = () => {
+    (controls.value as any).minDistance = mobileAndTabletCheck() ? def_distance.min * 0.5 : def_distance.min;
+    (controls.value as any).maxDistance = def_distance.max;
+    controls_targetto.value = new Vector3(0, 0, 0);
+    camera_moveto.value = new Vector3(
+        def_distance.max * 0.5,
+        def_distance.max * 0.5,
+        def_distance.max * 0.5
+    );
+}
+
 loadModels()
 watch(() => props.source, () => {
     const loaded = seekByName(scene.value, 'loaded')
@@ -232,16 +252,7 @@ watch(() => props.source, () => {
 
 watch(() => sidebar, () => {
     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;
-        (controls.value as any).target = new Vector3(0, 0, 0);
-        camera.value?.position.set(
-            def_distance.max * 0.5,
-            def_distance.max * 0.5,
-            def_distance.max * 0.5
-        );
-        (controls.value as any)._needsUpdate = true;
-        (controls.value as any).update()
+        gotoCenterAndDistance()
     }
     if (sidebar.is_open && sidebar.id_clickable) {
         const clickable = useClickable()
@@ -254,7 +265,8 @@ watch(() => sidebar, () => {
             const target_vector = new Vector3();
 
             el.getWorldPosition(target_vector);
-            camera_moveto.value = target_vector
+            controls_targetto.value = target_vector;
+            camera_rotatetoto.value = new Quaternion(0, 1, 0.25, -0.25)
         }
     }
 }, { deep: true })
@@ -271,35 +283,41 @@ onAfterRender(() => {
             (controls.value as any).update();
         }
     }
-    if (camera_moveto.value) {
+    if (controls_targetto.value) {
         timer.stopTimer();
-        (controls.value as any).target.lerp(camera_moveto.value, 0.01);
-        camera_moveto_count.value -= 1
-        if (camera_moveto_count.value == 0) {
-            camera_moveto_count.value = 100
-            camera_moveto.value = undefined
-            // camera.value?.position.set(30, 30, 30);
-            // camera.value?.rotation.set(0, 0, 1);
-            timer.startTimer()
+        (controls.value as any).target.lerp(controls_targetto.value, 0.01);
+        controls_targetto_count.value -= 1
+        if (controls_targetto_count.value == 0) {
+            controls_targetto_count.value = CON_MOVETO_COUNT
+            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_moveto_count.value -= 1
+        if (camera_moveto_count.value == 0) {
+            camera_moveto_count.value = CON_MOVETO_COUNT
+            camera_moveto.value = undefined
+        }
+    }
+    if (camera_rotatetoto.value) {
+        timer.stopTimer();
+        camera.value?.quaternion.slerp(camera_rotatetoto.value, 0.01);
+        camera_rotatetoto_count.value -= 1;
+        if (camera_rotatetoto_count.value == 0) {
+            camera_rotatetoto_count.value = CAM_MOVETO_COUNT
+            camera_rotatetoto.value = undefined
+        }
+    }
 })
 const timer = useTimer()
 timer.timer_func = () => {
     if (timer.seconds_left == 0 && !(controls.value as any).autoRotate && (controls.value as any).enabled) {
-        pause()
-        if (controls.value && camera.value) {
-            camera.value?.position.set(
-                (controls.value as any).maxDistance * 0.5,
-                (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 = true;
-            (controls.value as any).autoRotateSpeed = 0.5;
-        }
-        resume()
+        gotoCenterAndDistance();
+        (controls.value as any).autoRotate = true;
+        (controls.value as any).autoRotateSpeed = 0.5;
     }
 }