front/components.d.ts

@@ -36,6 +36,7 @@ declare module 'vue' {
     Load: typeof import('./src/components/load.vue')['default']
     Load_models: typeof import('./src/components/Promo/load_models.vue')['default']
     Main: typeof import('./src/components/Main/index.vue')['default']
+    Main_load_models: typeof import('./src/components/Main/main_load_models.vue')['default']
     ModelItem: typeof import('./src/components/Promo/modelItem.vue')['default']
     Models: typeof import('./src/components/Promo/models.vue')['default']
     Nav: typeof import('./src/components/nav.vue')['default']

front/src/assets/main.scss

@@ -39,6 +39,7 @@ a[href] {
         flex-grow: 1;
         height: 50vh;
         width: 100vw;
+        max-height: 65vh;
     }
 }
 

front/src/components/Gallery/gallery.vue

@@ -90,5 +90,5 @@ onMounted(async () => {
 })
 </script>
 <template>
-    <div id="gallery"></div>
+    <div id="gallery" style="    width: 100vw;    height: 100vh;"></div>
 </template>

front/src/components/Main/index.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { reactive, ref, watch } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import { SRGBColorSpace } from 'three';
 import { TresCanvas, } from '@tresjs/core';
-import { useGLTF, OrbitControls } from '@tresjs/cientos';
+import { OrbitControls } from '@tresjs/cientos';
+import MainLoadModels from './main_load_models.vue';
 import { useItem } from '../../stores/item';
 import { useRawData } from '../../stores/raw_data';
-import { IMAGE_URL } from '../../constants';
 
 const raw_dataStore = useRawData()
 const pageStore = useItem()
 
 const camera = ref()
 const controls = ref()
-const models = ref([] as model3DType[])
 
 const controlsState = reactive({
     enableDamping: true,
@@ -23,51 +22,14 @@ const controlsState = reactive({
     autoRotate: true,
 })
 
-const loadModels = async () => {
+onMounted(async () => {
-    camera.value.minDistance = raw_dataStore.data.min_distance;
+    if (!raw_dataStore.data.id && pageStore.page.id) {
-    camera.value.maxDistance = raw_dataStore.data.max_distance;
+        await raw_dataStore.load({ source: pageStore.page.scene_3d })
-    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
-        item.id = element.id
-        item.name = element.name
-
-        if (!element.is_enabled) {
-            item.modelFile.visible = false
-        }
-
-        if (item.modelFile.children[0]) {
-            item.modelFile.children[0].position.set(
-                item.modelFile.children[0].position.x + element.x_pos,
-                item.modelFile.children[0].position.y + element.y_pos,
-                item.modelFile.children[0].position.z + element.z_pos
-            )
-            item.modelFile.children[0].updateMatrixWorld(true)
-        }
-        models.value.push(item)
     }
-}
+})
-
-if (!raw_dataStore.data.id && pageStore.page.id) {
-    await raw_dataStore.load({ source: pageStore.page.id })
-    await loadModels();
-    controls.value.autoRotate = true
-    controls.value.value.update()
-}
 
 watch(() => pageStore.page.id, async () => {
-    await raw_dataStore.load({ source: pageStore.page.id })
+    await raw_dataStore.load({ source: pageStore.page.scene_3d })
-    await loadModels()
-    controls.value.autoRotate = true
-    controls.value.value.update()
 
 })
 </script>
@@ -85,13 +47,8 @@ watch(() => pageStore.page.id, async () => {
             <TresCanvas :output-encoding="SRGBColorSpace">
                 <TresPerspectiveCamera ref="camera" />
                 <OrbitControls v-bind="controlsState" make-default ref="controls" />
-                <TresGroup ref="scene">
+                <MainLoadModels v-if="raw_dataStore.data.id" />
-                    <template v-for="item in models">
+                <TresAmbientLight />
-                        <TresGroup :name="item.name">
-                            <TresObject3D v-bind="item.modelFile.clone()" />
-                        </TresGroup>
-                    </template>
-                </TresGroup>
             </TresCanvas>
         </div>
     </div>

front/src/components/Main/main_load_models.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useLoop, useTresContext } from '@tresjs/core';
+import { useGLTF } from '@tresjs/cientos';
+import { OrbitControlsProps } from '@tresjs/cientos/dist/core/controls/OrbitControls.vue.js';
+import { useRawData } from '../../stores/raw_data';
+import { IMAGE_URL } from '../../constants';
+import { Euler, Vector3 } from 'three';
+
+const { controls, camera } = useTresContext()
+const raw_dataStore = useRawData()
+const models = ref([] as model3DType[])
+
+const loadModels = async () => {
+    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
+        item.id = element.id
+        item.name = element.name
+
+        if (!element.is_enabled) {
+            item.modelFile.visible = false
+        }
+
+        if (item.modelFile.children[0]) {
+            item.modelFile.children[0].position.set(
+                item.modelFile.children[0].position.x + element.x_pos,
+                item.modelFile.children[0].position.y + element.y_pos,
+                item.modelFile.children[0].position.z + element.z_pos
+            )
+            item.modelFile.children[0].updateMatrixWorld(true)
+        }
+        models.value.push(item)
+    }
+}
+const cameraSet = () => {
+    if (controls.value) {
+        (controls.value as OrbitControlsProps).minDistance = raw_dataStore.data.min_distance;
+        (controls.value as OrbitControlsProps).maxDistance = raw_dataStore.data.max_distance;
+        (controls.value as OrbitControlsProps).autoRotate = true;
+        (controls.value as OrbitControlsProps).autoRotateSpeed = 1;
+        (controls.value as any).update()
+    }
+    if (camera.value) {
+        const d = raw_dataStore.data.max_distance * 0.5;
+        camera.value.position.set(d * 0.25, d * 0.5, d);
+        camera.value.updateMatrixWorld()
+    }
+}
+loadModels()
+cameraSet()
+const { onAfterRender } = useLoop()
+onAfterRender(() => {
+    (controls.value as any).update()
+})
+</script>
+<template>
+    <template v-for="item in models">
+        <TresGroup :name="item.name">
+            <TresObject3D v-bind="item.modelFile.clone()" />
+        </TresGroup>
+    </template>
+</template>

front/src/components/load.vue

@@ -1,11 +1,22 @@
 <script setup lang="ts">
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useItem } from '../stores/item';
+import { watch } from 'vue';
 
 const page = useItem()
 const route = useRoute()
+const router = useRouter()
 
-await page.load(route.params)
+router.afterEach((to) => {
+    if (to.name == 'home_no') {
+        page.load(route.params)
+    }
+    return true
+})
+
+watch(() => route.params.item, () => {
+    page.load(route.params)
+})
 </script>
 <template>
 

front/src/components/nav.vue

@@ -8,7 +8,7 @@ const pageStore = useItem()
 <template>
     <div class="nav">
         <div class="nav-group">
-            <span class="nav-icon" :class="[{ 'active': route.name == 'main' }]">
+            <span class="nav-icon" :class="[{ 'active': ['main', 'home_no'].includes(route.name as string) }]">
                 <RouterLink :to="`/${pageStore.page.slug}`">
                     <i-mdi-home-outline />
                 </RouterLink>
@@ -18,7 +18,7 @@ const pageStore = useItem()
                     <i-mdi:video-3d />
                 </RouterLink>
             </span>
-            <span class="nav-icon" :class="[{ 'active': route.name == 'gallery' }]"  style="font-size: 1.375rem;">
+            <span class="nav-icon" :class="[{ 'active': route.name == 'gallery' }]" style="font-size: 1.375rem;">
                 <RouterLink :to="`/${pageStore.page.slug}/gallery`">
                     <i-mdi:vector-arrange-below />
                 </RouterLink>

front/src/main.ts

@@ -22,12 +22,7 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-    // This function will be called before each route change
     console.log('Navigating from', from.fullPath, 'to', to.fullPath);
-
-    // You can perform any additional logic here
-
-    // Make sure to call next() to continue with the navigation
     next();
 });