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",

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": {

front/src/assets/main.scss

@@ -35,8 +35,9 @@ a[href] {
         }
     }
 
-    canvas {
-        height: 40vh;
+    &-canvas {
+        flex-grow: 1;
+        height: 50vh;
         width: 100vw;
     }
 }

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>
+        <div class="main-canvas">
             <TresCanvas :output-encoding="SRGBColorSpace">
-            <TresPerspectiveCamera />
+                <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>
             </TresCanvas>
         </div>
+    </div>
 </template>