smoothy refactoring

front/src/components/Promo/load_models.vue

@@ -35,7 +35,7 @@ const targetDistance = reactive({ max: 10, min: 0 })
 let sidebar_clickable = [] as PromoScene[]
 let sidebar_visible = [] as PromoScene[]
 
-const COUNT = 100
+const COUNT = 50
 type smooth = {
     value: Vector3 | Quaternion | undefined,
     count: number
@@ -47,8 +47,6 @@ const temp_smooth_target = reactive({}) as smooth
 const temp_smooth_move = reactive({}) as smooth
 const temp_smooth_rotate = reactive({}) as smooth
 
-const vis_target = ref()
-
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
 const clickable = useClickable()
@@ -272,9 +270,7 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
             const target_vector = new Vector3();
 
             el.getWorldPosition(target_vector);
-            target_vector.y = raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1;
+            // target_vector.y = raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1;
-            const target_vector_1 = target_vector.clone().multiplyScalar(3)
-            console.log(target_vector, target_vector_1)
 
             const quaternion = new Quaternion();
             quaternion.setFromEuler(new Euler(
@@ -286,18 +282,16 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
             set_moveto(smooth_rotate, quaternion)
 
             const d = raw_dataStore.data.max_distance * 0.5
-            if(camera.value?.position && camera.value?.position.distanceTo(new Vector3(d,d,d)) > 20) {
+            if (camera.value?.position && camera.value?.position.distanceTo(new Vector3(d, d, d)) > 20) {
                 set_moveto(temp_smooth_target, target_vector)
                 set_moveto(temp_smooth_move, target_vector)
-                
+
                 set_moveto(smooth_target, new Vector3(0, 0, 0))
                 set_moveto(smooth_move, new Vector3(d, d, d))
             } else {
                 set_moveto(smooth_target, target_vector)
                 set_moveto(smooth_move, target_vector)
             }
-                
-                vis_target.value = target_vector;
         }
     }
 }, { deep: true })
@@ -316,45 +310,41 @@ onAfterRender(() => {
             }
         }
     })
-    const koef = 1 / COUNT
+    const koef = (1 / COUNT) * 3
-    if (smooth_target.value) {
+    const smoothy = [
-        timer.stopTimer();
+        {
-        (controls.value as any).target.lerp(smooth_target.value, koef);
+            el: smooth_target,
-        smooth_target.count -= 1
+            temp_el: temp_smooth_target,
-        if (smooth_target.count == 0) {
+            f: () => (controls.value as any).target.lerp(smooth_target.value as Vector3, smooth_target.count < COUNT * 0.5 ? 0.15 : koef),
-            set_moveto(smooth_target, undefined)
+        },
-
+        {
-            if (temp_smooth_target) {
+            el: smooth_move,
-                set_moveto(smooth_target, temp_smooth_target.value)
+            temp_el: temp_smooth_move,
-                set_moveto(temp_smooth_target, undefined)
+            f: () => camera.value?.position.lerp(smooth_move.value as Vector3, smooth_move.count < COUNT * 0.5 ? 0.15 : koef),
+        },
+        {
+            el: smooth_rotate,
+            f: () => {
+                camera.value?.quaternion.slerp(smooth_rotate.value as Quaternion, koef);
+                camera.value?.quaternion.normalize()
             }
         }
-    }
+    ]
-    if (smooth_move.value) {
+    smoothy.forEach(element => {
-        timer.stopTimer();
+        if (element.el.value) {
-        camera.value?.position.lerp(smooth_move.value, koef);
+            timer.stopTimer();
-        smooth_move.count -= 1
+            element.f()
-        if (smooth_move.count == 0) {
+            element.el.count -= 1
-            // camera.value?.lookAt(camera_moveto.value)
+            if (element.el.count == 0) {
-            set_moveto(smooth_move, undefined)
+                set_moveto(element.el, undefined)
 
-            if (temp_smooth_move) {
+                if (element.temp_el && element.temp_el.value) {
-                set_moveto(smooth_move, temp_smooth_move.value)
+                    set_moveto(element.el, element.temp_el.value)
-                set_moveto(temp_smooth_move, undefined)
+                    set_moveto(element.temp_el, undefined)
+                }
             }
         }
-    }
+    });
-    if (smooth_rotate.value) {
-        timer.stopTimer();
-        camera.value?.quaternion.slerp(smooth_rotate.value as Quaternion, koef);
-        camera.value?.quaternion.normalize()
-        smooth_rotate.count -= 1;
-        if (smooth_rotate.count == 0) {
-            set_moveto(smooth_rotate, undefined)
-        }
-        camera.value?.updateMatrixWorld()
-    }
-    (controls.value as any).update()
 })
 
 const timer = useTimer()
@@ -433,10 +423,6 @@ onUnmounted(() => {
                 <TresObject3D v-bind="item.modelFile.clone()" />
             </TresGroup>
         </template>
-        <TresMesh :position="vis_target || new Vector3(0, 0, 0)" name="test">
-            <TresBoxGeometry :args="[1, 1, 1]" />
-            <TresMeshStandardMaterial color="red" />
-        </TresMesh>
         <template v-for="(item, i) in clickable_items">
             <TresObject3D v-bind="item.clone()" :ref="clickable_refs[i]" />
         </template>

front/src/components/sidebar.vue

@@ -25,20 +25,6 @@ watch(() => sidebar.id_clickable, () => {
         <template v-else>
             <div class="sidebar-content">
                 <h2>{{ sidebar_scene.name }}</h2>
-                <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('obj') }]">
-                    <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('obj')">
-                        <i-mdi-minus-circle v-if="sidebar.isAccOpen('obj')" />
-                        <i-mdi-plus-circle v-else />
-                        <h3>Объекты</h3>
-                    </div>
-
-                    <div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('obj')">
-                        <div class="sidebar-list-item" v-for="item in sidebar_scene.visible">
-                            <input type="checkbox" v-model=item.is_enabled :value="item.id" :id="item.id.toString()" />
-                            <label :for="item.id.toString()">{{ item.name }}</label>
-                        </div>
-                    </div>
-                </div>
                 <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('clickable') }]">
                     <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('clickable')">
                         <i-mdi-minus-circle v-if="sidebar.isAccOpen('clickable')" />
@@ -54,6 +40,21 @@ watch(() => sidebar.id_clickable, () => {
                         </div>
                     </div>
                 </div>
+                <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('obj') }]">
+                    <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('obj')">
+                        <i-mdi-minus-circle v-if="sidebar.isAccOpen('obj')" />
+                        <i-mdi-plus-circle v-else />
+                        <h3>Объекты</h3>
+                    </div>
+
+                    <div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('obj')">
+                        <div class="sidebar-list-item" v-for="item in sidebar_scene.visible">
+                            <input type="checkbox" v-model=item.is_enabled :value="item.id" :id="item.id.toString()" />
+                            <label :for="item.id.toString()">{{ item.name }}</label>
+                        </div>
+                    </div>
+                </div>
+
                 <div class="sidebar-accordion" :class="[{ 'open': sidebar.isAccOpen('desc') }]">
                     <div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('desc')">
                         <i-mdi-minus-circle v-if="sidebar.isAccOpen('desc')" />