front/src/assets/sidebar.scss

@@ -69,6 +69,7 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
 
         >a {
             line-height: 1;
+            font-size: 0;
             color: inherit;
             width: 100%;
             height: 100%;
@@ -96,10 +97,10 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
 
     }
 
-    &-enter {
+    &-deep {
         svg {
-            width: 80%;
-            height: 80%;
+            width: 70%;
+            height: 70%;
         }
     }
 }

front/src/components/Promo/load_models.vue

@@ -43,6 +43,8 @@ const camera_moveto_count = ref(COUNT)
 const camera_rotatetoto = ref() as Ref<Quaternion | undefined>;
 const camera_rotatetoto_count = ref(COUNT)
 
+const vis_target = ref()
+
 const sidebar = usePromoSidebar();
 const sidebar_scene = usePromoScene();
 const clickable = useClickable()
@@ -261,7 +263,7 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
             const target_vector = new Vector3();
 
             el.getWorldPosition(target_vector);
-            target_vector.y = 10;
+            target_vector.y = raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 10 : 1;
 
             const quaternion = new Quaternion();
             quaternion.setFromEuler(new Euler(
@@ -275,6 +277,7 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
             camera_rotatetoto.value = quaternion
             controls_targetto.value = target_vector;
             camera_moveto.value = target_vector;
+            vis_target.value = target_vector;
         }
     }
 }, { deep: true })
@@ -308,7 +311,7 @@ onAfterRender(() => {
         camera.value?.position.lerp(camera_moveto.value, koef);
         camera_moveto_count.value -= 1
         if (camera_moveto_count.value == 0) {
-            // camera.value?.lookAt(camera_moveto.value)
+            camera.value?.lookAt(camera_moveto.value)
             camera_moveto.value = undefined;
             camera_moveto_count.value = COUNT;
         }
@@ -324,7 +327,7 @@ onAfterRender(() => {
         }
         camera.value?.updateMatrixWorld()
     }
-    // (controls.value as any).update()
+    (controls.value as any).update()
 })
 
 const timer = useTimer()
@@ -403,6 +406,10 @@ 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>