front/src/components/Promo/index.vue

@@ -95,9 +95,9 @@ const nextClickableId = () => {
                     <LoadModels :source="route.params.target" :loaded_pan="loadedPan" :push="router.push" />
                 </Suspense>
             </TresCanvas>
-            <div class="itemnav" v-if="sidebar.is_open">
+            <div class="itemnav" v-if="sidebar.is_btn_open">
                 <div class="itemnav-close itemnav_one" v-if="sidebar.target">
-                    <a href="#" @click.prevent="sidebar.close()">
+                    <a href="#" @click.prevent="sidebar.closeBtn()">
                         <icon_plus />
                     </a>
                 </div>
@@ -112,7 +112,7 @@ const nextClickableId = () => {
                     </RouterLink>
                 </div>
                 <div class="itemnav-close itemnav_big" v-else>
-                    <a href="#" @click.prevent="sidebar.close()">
+                    <a href="#" @click.prevent="sidebar.closeBtn()">
                         <icon_plus />
                     </a>
                 </div>

front/src/components/Promo/load_models.vue

@@ -4,10 +4,10 @@ import {
     Box3, Color, Group, Mesh,
     MeshStandardMaterial,
     Vector2, Vector3,
-    Quaternion, Euler, SRGBColorSpace
+    Quaternion, SRGBColorSpace
 } from 'three';
 
-import { useTresContext, useSeek, useLoop, TresControl } from '@tresjs/core';
+import { useTresContext, useSeek, useLoop } from '@tresjs/core';
 // @ts-ignore
 import { useGLTF, useGLTFExporter } from '@tresjs/cientos'
 
@@ -23,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 { degToRad } from 'three/src/math/MathUtils.js';
 
 const props = defineProps(['source', 'loaded_pan', 'push'])
 
@@ -36,20 +35,15 @@ 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
 }
 const smooth_target = reactive({}) as smooth
 const smooth_move = reactive({}) as smooth
-const smooth_rotate = reactive({}) as smooth
 const temp_smooth_target = reactive({}) as smooth
 const temp_smooth_move = reactive({}) as smooth
-const temp_smooth_rotate = reactive({}) as smooth
-
-const point_1 = ref(new Vector3())
-const point_2 = ref(new Vector3())
 
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
@@ -256,13 +250,13 @@ watch(() => props.source, () => {
     }
 }, { deep: true })
 
-watch(() => sidebar.is_open, () => {
+watch(() => sidebar.is_btn_open, () => {
-    if (sidebar.is_open == false) {
+    if (sidebar.is_btn_open == false) {
         gotoCenterAndDistance();
     }
 })
-watch(() => sidebar.is_open && sidebar.id_clickable, () => {
+watch(() => sidebar.is_btn_open && sidebar.id_clickable, () => {
-    if (sidebar.is_open && sidebar.id_clickable) {
+    if (sidebar.is_btn_open && sidebar.id_clickable) {
         const clickable = useClickable()
         const target = clickable.list.find(el => el.id == sidebar.id_clickable)
         if (!target) return
@@ -287,8 +281,12 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
 
 const { onBeforeRender } = useLoop()
 onBeforeRender(() => {
+    const cameraDistance = (camera.value?.position as Vector3).distanceTo((controls.value as any).target)
+    if (cameraDistance <= raw_dataStore.data.min_distance && sidebar.is_btn_open == false) {
+        // sidebar.is_btn_open = true
+    }
     clickable_refs.value.map(el => {
-        el.value[0].visible = (camera.value?.position as Vector3).distanceTo((controls.value as any).target) < raw_dataStore.data.min_distance ? false : true;
+        el.value[0].visible = cameraDistance < raw_dataStore.data.min_distance ? false : true;
         if (el.value[0] && el.value[0].children) {
             el.value[0].children[0].lookAt(camera.value?.position);
             el.value[0].children[0].rotateX(90 * (Math.PI / 180));

front/src/index.d.ts

@@ -62,6 +62,7 @@ interface PromoSidebar extends PromoSidebarData {
     id_clickable?: number
     loading: boolean
     is_open: boolean
+    is_btn_open: boolean
     accordions: string[]
 }
 interface PromoScene {

front/src/stores/promo_sidebar.ts

@@ -10,6 +10,7 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
             target: undefined,
             loading: true,
             is_open: false,
+            is_btn_open: false,
             accordions: [],
         } as PromoSidebar
     },
@@ -31,7 +32,10 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
                 this.setData(sidebar_data)
             }
 
-            this.is_open = true
+            if (!this.is_btn_open) {
+                this.is_btn_open = true
+                this.is_open = true
+            }
             this.loading = true
         },
         setData(data: PromoSidebarData) {
@@ -39,10 +43,18 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
         },
         close() {
             if (this.is_open) {
-                this.$reset()
+                // this.id_clickable = undefined;
-                this.is_open = false
+                // this.target = undefined;
+                // this.loading = true;
+                this.is_open = false;
+                this.accordions = []
             }
         },
+        closeBtn() {
+            this.$reset;
+            this.is_open = false;
+            this.is_btn_open = false;
+        },
         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')