From 32f70b6d8c02f81c250a2d58fde7462d63a1bdaf Mon Sep 17 00:00:00 2001
From: aarizona <ar.ariz.arizona@gmail.com>
Date: Fri, 30 Aug 2024 17:17:14 +0300
Subject: [PATCH] load

---
 front/package-lock.json             | 26 --------------------------
 front/package.json                  |  1 -
 front/src/assets/main.scss          |  5 +++--
 front/src/components/Main/index.vue | 29 ++++++++++++++++++++---------
 4 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/front/package-lock.json b/front/package-lock.json
index 9f54408..06179b1 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -26,7 +26,6 @@
         "three": "^0.164.1",
         "vite-svg-loader": "^5.1.0",
         "vue": "^3.4.21",
-        "vue-3d-model": "^2.0.0-alpha.4",
         "vue-router": "^4.3.2"
       },
       "devDependencies": {
@@ -3735,31 +3734,6 @@
         }
       }
     },
-    "node_modules/vue-3d-model": {
-      "version": "2.0.0-alpha.4",
-      "resolved": "https://registry.npmjs.org/vue-3d-model/-/vue-3d-model-2.0.0-alpha.4.tgz",
-      "integrity": "sha512-/dGP7YTAK5e7o8i9592PS9S0mbUStRl26OeeC2Qz4XePrG9BU/Q1GkETqPSMJPWgNa8TkqrxXP9ItYgcmxuSqw==",
-      "dependencies": {
-        "@types/three": "^0.141.0",
-        "three": "^0.141.0"
-      },
-      "peerDependencies": {
-        "vue": ">=3.0.0"
-      }
-    },
-    "node_modules/vue-3d-model/node_modules/@types/three": {
-      "version": "0.141.0",
-      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.141.0.tgz",
-      "integrity": "sha512-OJdKDgTPVBUgc+s74DYoy4aLznbFFC38Xm4ElmU1YwGNgR7GGFVvFCX7lpVgOsT6S1zSJtGdajTsOYE8/xY9nA==",
-      "dependencies": {
-        "@types/webxr": "*"
-      }
-    },
-    "node_modules/vue-3d-model/node_modules/three": {
-      "version": "0.141.0",
-      "resolved": "https://registry.npmjs.org/three/-/three-0.141.0.tgz",
-      "integrity": "sha512-JaSDAPWuk4RTzG5BYRQm8YZbERUxTfTDVouWgHMisS2to4E5fotMS9F2zPFNOIJyEFTTQDDKPpsgZVThKU3pXA=="
-    },
     "node_modules/vue-router": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.3.2.tgz",
diff --git a/front/package.json b/front/package.json
index 37c2a17..9e8dd60 100644
--- a/front/package.json
+++ b/front/package.json
@@ -28,7 +28,6 @@
     "three": "^0.164.1",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.21",
-    "vue-3d-model": "^2.0.0-alpha.4",
     "vue-router": "^4.3.2"
   },
   "devDependencies": {
diff --git a/front/src/assets/main.scss b/front/src/assets/main.scss
index 6745ce2..5f2538a 100644
--- a/front/src/assets/main.scss
+++ b/front/src/assets/main.scss
@@ -35,8 +35,9 @@ a[href] {
         }
     }
 
-    canvas {
-        height: 40vh;
+    &-canvas {
+        flex-grow: 1;
+        height: 50vh;
         width: 100vw;
     }
 }
diff --git a/front/src/components/Main/index.vue b/front/src/components/Main/index.vue
index 715c094..d3c145e 100644
--- a/front/src/components/Main/index.vue
+++ b/front/src/components/Main/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { SRGBColorSpace } from 'three';
-import { TresCanvas } from '@tresjs/core';
+import { TresCanvas, useLoop } from '@tresjs/core';
 import { useGLTF } from '@tresjs/cientos';
 import { useItem } from '../../stores/item';
 import { useRawData } from '../../stores/raw_data';
@@ -10,13 +10,21 @@ import { IMAGE_URL } from '../../constants';
 const raw_dataStore = useRawData()
 const pageStore = useItem()
 
+const camera = ref()
 const models = ref([] as model3DType[])
+const scene = ref()
 
 const loadModels = async () => {
+    camera.value.minDistance = raw_dataStore.data.min_distance;
+    camera.value.maxDistance = raw_dataStore.data.max_distance;
+    const d = raw_dataStore.data.max_distance * 0.5;
+    camera.value.position.set(d, d, d)
     for (let index = 0; index < raw_dataStore.data.elements.length; index++) {
         const element = raw_dataStore.data.elements[index];
         const item = {} as model3DType
 
+        if (element.name == 'ground') continue
+
         item.modelUrl = `${IMAGE_URL}/${element.model_file}`
         let { scene: loaded_scene } = await useGLTF(item.modelUrl)
         item.modelFile = loaded_scene
@@ -48,7 +56,6 @@ watch(() => pageStore.page.id, async () => {
     await raw_dataStore.load({ source: pageStore.page.id })
     loadModels()
 })
-
 </script>
 <template>
     <div class="main">
@@ -60,13 +67,17 @@ watch(() => pageStore.page.id, async () => {
                 {{ p }}
             </p>
         </div>
-        <TresCanvas :output-encoding="SRGBColorSpace">
-            <TresPerspectiveCamera />
-            <template v-for="item in models">
-                <TresGroup :name="item.name">
-                    <TresObject3D v-bind="item.modelFile.clone()" />
+        <div class="main-canvas">
+            <TresCanvas :output-encoding="SRGBColorSpace">
+                <TresPerspectiveCamera ref="camera" />
+                <TresGroup ref="scene">
+                    <template v-for="item in models">
+                        <TresGroup :name="item.name">
+                            <TresObject3D v-bind="item.modelFile.clone()" />
+                        </TresGroup>
+                    </template>
                 </TresGroup>
-            </template>
-        </TresCanvas>
+            </TresCanvas>
+        </div>
     </div>
 </template>
\ No newline at end of file