front/src/components/Promo/load_models.vue

@@ -251,23 +251,6 @@ onAfterRender(() => {
     }
 })
 
-const openSidebar = (id: number) => {
-    sidebar.open(id);
-
-    const clickable = useClickable()
-    const target = clickable.list.find(el => el.id == id)
-    if (!target) return
-    const el = seekByName(scene.value, `${id}_clickable`);
-    if (el) {
-        (controls.value as any).maxDistance = 10;
-        (controls.value as any).minDistance = 1;
-        const target_vector = new Vector3();
-
-        el.getWorldPosition(target_vector);
-        (controls.value as any).target = target_vector;
-    }
-}
-
 loadModels()
 watch(() => props.source, () => {
     const loaded = seekByName(scene.value, 'loaded')
@@ -278,12 +261,27 @@ watch(() => props.source, () => {
     loadModels()
 })
 
-watch(() => sidebar.is_open, () => {
+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;
     }
-})
+    if (sidebar.is_open && sidebar.id_clickable) {
+        const clickable = useClickable()
+        const target = clickable.list.find(el => el.id == sidebar.id_clickable)
+        if (!target) return
+        const el = seekByName(scene.value, `${sidebar.id_clickable}_clickable`);
+        if (el) {
+            (controls.value as any).maxDistance = 10;
+            (controls.value as any).minDistance = 1;
+            const target_vector = new Vector3();
+
+            el.getWorldPosition(target_vector);
+            target_vector.y = 0;
+            (controls.value as any).target = target_vector;
+        }
+    }
+}, { deep: true })
 
 onMounted(() => {
     document.addEventListener('click', clickEvent)
@@ -330,7 +328,7 @@ const clickEvent = (event: MouseEvent) => {
     const intersects = raycaster.value.intersectObjects(clickable_objects);
     const names = intersects.map(el => (el.object.parent ? el.object.parent.name : el.object.name) ?? false).filter(Boolean)
     if (names.length) {
-        openSidebar(parseInt(names[0].replace('_clickable', '')))
+        sidebar.open(parseInt(names[0].replace('_clickable', '')))
     }
 }
 </script>

front/src/index.d.ts

@@ -60,6 +60,7 @@ interface PromoSidebarData {
     target_name?: string
 }
 interface PromoSidebar extends PromoSidebarData {
+    id_clickable?: number
     loading: boolean
     is_open: boolean
 }

front/src/stores/promo_sidebar.ts

@@ -4,6 +4,7 @@ import { useClickable } from './clickable'
 export const usePromoSidebar = defineStore('promo_sidebar', {
     state: () => {
         return {
+            id_clickable: undefined,
             title: undefined,
             description: undefined,
             target: undefined,
@@ -19,6 +20,8 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
                 const target = clickable.list.find(el => el.id == id)
                 if (!target) return
                 const sidebar_data = {
+                    id_clickable: id,
+                    target_id: target.id,
                     title: target.name,
                     description: target.description
                 } as PromoSidebarData