front/src/assets/main.scss

@@ -28,11 +28,17 @@ a[href] {
     h1 {
         font-size: 4rem
     }
+
     p {
         &:not(:last-child) {
             margin-bottom: 0.5rem;
         }
     }
+
+    canvas {
+        height: 40vh;
+        width: 100vw;
+    }
 }
 
 @import 'sidebar.scss';

front/src/components/Main/index.vue

@@ -1,17 +1,54 @@
 <script setup lang="ts">
-import { watch } from 'vue';
+import { ref, watch } from 'vue';
+import { SRGBColorSpace } from 'three';
+import { TresCanvas } from '@tresjs/core';
+import { useGLTF } from '@tresjs/cientos';
 import { useItem } from '../../stores/item';
 import { useRawData } from '../../stores/raw_data';
+import { IMAGE_URL } from '../../constants';
 
 const raw_dataStore = useRawData()
 const pageStore = useItem()
+
+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
+
+        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 })
+    loadModels()
 }
 
 watch(() => pageStore.page.id, async () => {
     await raw_dataStore.load({ source: pageStore.page.id })
+    loadModels()
 })
+
 </script>
 <template>
     <div class="main">
@@ -23,5 +60,13 @@ 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()" />
+                </TresGroup>
+            </template>
+        </TresCanvas>
     </div>
 </template>

front/src/main.ts

@@ -10,7 +10,7 @@ import Gallery from './components/Gallery/index.vue'
 import Promo from './components/Promo/index.vue'
 
 const routes = [
-    { path: '/', component: Gallery, name: 'home_no' },
+    { path: '/', component: Main, name: 'home_no' },
     { path: '/:item', component: Main, name: 'main' },
     { path: '/:item/gallery', component: Gallery, name: 'gallery' },
     { path: '/:item/:target', component: Promo, name: 'scene' },