front/.env.development

@@ -1,4 +1,4 @@
 VITE_SERVER_URL='https://demo.kustarshina.ru'
 VITE_IMAGE_URL='https://demo.kustarshina.ru'
 VITE_SERVER_URL='https://demo.kustarshina.ru'
-VITE_SERVER_URL='http://localhost:8000'
+# VITE_SERVER_URL='http://localhost:8000'

front/package-lock.json

@@ -21,6 +21,7 @@
         "@vueuse/components": "^10.9.0",
         "@vueuse/core": "^10.9.0",
         "d3": "^7.9.0",
+        "maath": "^0.10.8",
         "pathfinding": "^0.4.18",
         "pinia": "^2.1.7",
         "reset-css": "^5.0.2",
@@ -1292,7 +1293,6 @@
       "version": "0.164.1",
       "resolved": "https://registry.npmjs.org/@types/three/-/three-0.164.1.tgz",
       "integrity": "sha512-dR/trWDhyaNqJV38rl1TonlCA9DpnX7OPYDWD81bmBGn/+uEc3+zNalFxQcV4FlPTeDBhCY3SFWKvK6EJwL88g==",
-      "dev": true,
       "dependencies": {
         "@tweenjs/tween.js": "~23.1.1",
         "@types/stats.js": "*",
@@ -2732,6 +2732,16 @@
         "node": ">=10"
       }
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.10",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.10.tgz",

front/package.json

@@ -23,6 +23,7 @@
     "@vueuse/components": "^10.9.0",
     "@vueuse/core": "^10.9.0",
     "d3": "^7.9.0",
+    "maath": "^0.10.8",
     "pathfinding": "^0.4.18",
     "pinia": "^2.1.7",
     "reset-css": "^5.0.2",

front/src/components/Promo/load_models.vue

@@ -47,6 +47,9 @@ 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();
 const clickable = useClickable()
@@ -275,17 +278,18 @@ watch(() => sidebar.is_open && sidebar.id_clickable, () => {
             target_vector.setComponent(1, raw_dataStore.data.min_distance > 50 ? raw_dataStore.data.min_distance / 7 : 1)
 
             const d = raw_dataStore.data.max_distance * 0.5;
-            const lerp_vector = new Vector3(
+            const lerp_vector = new Vector3()
-                ((camera.value?.position as Vector3).x + target_vector.x) * 0.5,
+            lerp_vector.lerpVectors(camera.value?.position, target_vector, 0.5).multiply(new Vector3(1, 2, 1))
-                ((camera.value?.position as Vector3).y + target_vector.y) * 0.5,
+            // lerp_vector.setComponent(1, d)
-                ((camera.value?.position as Vector3).z + target_vector.z) * 0.5,
+            // const multiply = new Vector3(1.25, 1, 1.25)
-            )
+            const multiply = new Vector3(1, 1, 1)
-            lerp_vector.setComponent(1, d)
-            const multiply = new Vector3(1.25, 1, 1.25)
 
             const target_move = target_vector.multiply(multiply)
             const lerp_move = lerp_vector.multiply(multiply)
 
+            point_1.value = target_move
+            point_2.value = lerp_move;
+
             if (
                 camera.value?.position
                 && (
@@ -457,5 +461,13 @@ onUnmounted(() => {
         <template v-for="(item, i) in clickable_items">
             <TresObject3D v-bind="item.clone()" :ref="clickable_refs[i]" />
         </template>
+        <TresMesh :position="point_1">
+            <TresBoxGeometry :args="[0.1, 0.1, 0.1]" />
+            <TresMeshStandardMaterial color="violet" />
+        </TresMesh>
+        <TresMesh :position="point_2">
+            <TresBoxGeometry :args="[0.1, 0.1, 0.1]" />
+            <TresMeshStandardMaterial color="darkgreen" />
+        </TresMesh>
     </TresGroup>
 </template>