front/src/assets/sidebar.scss

@@ -44,6 +44,7 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
     flex-direction: column;
     gap: 1.5rem;
     color: #484848;
+    pointer-events: none;
 
     &.open {
         right: 0;
@@ -55,6 +56,7 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
     }
 
     &-content {
+        pointer-events: all;
         background-color: $bg;
         border-top-left-radius: 0.5rem;
         border-bottom-left-radius: 0.5rem;

front/src/components/Promo/load_models.vue

@@ -22,10 +22,11 @@ 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 = 100;
+const CAM_MOVETO_COUNT = 10;
 
 const models = ref<model3DType[]>([])
 const clickable_items = ref<any[]>([])
@@ -128,12 +129,14 @@ const makeGround = () => {
     ground.name = "ground"
     models.value.push({ name: 'ground', modelFile: ground })
 }
+
 const clearValues = () => {
     clickable_items.value = []
     clickable_refs.value = []
     sidebar_clickable = []
     sidebar_visible = []
 }
+
 const loadModels = async () => {
     if (!props.source) return
     if (!raw_dataStore.data) return
@@ -290,10 +293,12 @@ watch(() => props.source, () => {
     }
 }, { deep: true })
 
-watch(() => sidebar, () => {
+watch(() => sidebar.is_open, () => {
     if (sidebar.is_open == false) {
         gotoCenterAndDistance();
     }
+})
+watch(() => sidebar.is_open && sidebar.id_clickable, () => {
     if (sidebar.is_open && sidebar.id_clickable) {
         const clickable = useClickable()
         const target = clickable.list.find(el => el.id == sidebar.id_clickable)
@@ -306,7 +311,14 @@ watch(() => sidebar, () => {
 
             el.getWorldPosition(target_vector);
             controls_targetto.value = target_vector;
-            camera_rotatetoto.value = new Quaternion(Math.PI * 0.5, Math.PI * 0.5, Math.PI * 0.5, Math.PI * 0.5)
+
+            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
         }
     }
 }, { deep: true })
@@ -350,10 +362,10 @@ onAfterRender(() => {
             camera_moveto.value = undefined
         }
     }
-    if (camera_rotatetoto.value) {
+    if (camera_rotatetoto.value && !controls_targetto.value) {
         timer.stopTimer();
         camera.value?.quaternion.slerp(camera_rotatetoto.value, 0.01);
-        camera.value?.quaternion.normalize();
+        // camera.value?.quaternion.normalize();
         camera_rotatetoto_count.value -= 1;
         if (camera_rotatetoto_count.value == 0) {
             camera_rotatetoto_count.value = CAM_MOVETO_COUNT
@@ -381,6 +393,8 @@ const stopTimer = () => {
 
 const pointer = reactive({ x: 0, y: 0 })
 const clickEvent = (event: MouseEvent) => {
+    if (event.target && !(event.target as HTMLElement).closest('canvas')) return
+
     const x = (event.clientX / window.innerWidth) * 2 - 1
     const y = - (event.clientY / window.innerHeight) * 2 + 1
     if (x == pointer.x && y == pointer.y) return