add elements

front/src/components/Promo/main.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { SERVER_URL, IMAGE_URL } from '../../constants'
+import { IMAGE_URL, SERVER_URL, } from '../../constants'
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { Vector3 } from 'three';
 
 import { TresCanvas } from '@tresjs/core';
 import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'
 
 import Env from './env.vue'
+import ModelItem from './modelItem.vue';
 
 const minPan = new Vector3(-10, 1, -5);
 const maxPan = new Vector3(5, 1, 5);
@@ -35,8 +36,26 @@ const point_light = reactive({
     intensity: 10000,
     position: new Vector3(-100, 5, 5),
 })
+interface element3DType {
+    id: number
+    model_file: string
+    name: string
+    description: string
+    parent?: number
+}
+interface model3DType extends element3DType {
+    modelUrl?: string
+}
+const models = ref<model3DType[]>([])
 const loadModels = async () => {
-    const res = await fetch(`${SERVER_URL}/api/front_img/`)
+    const res = await fetch(`${SERVER_URL}/api/obj/element/?parent__isnull=True`)
+    const data = await res.json() as element3DType[]
+    for (let index = 0; index < data.length; index++) {
+        const element = data[index];
+        const item = { ...element } as model3DType
+        item.modelUrl = `${IMAGE_URL}/${item.model_file}`
+        models.value.push(item)
+    }
 }
 onMounted(() => {
     loadModels()
@@ -53,6 +72,11 @@ onMounted(() => {
             <Suspense>
                 <Env />
             </Suspense>
+            <Suspense>
+                <TresGroup v-for="item in models">
+                    <ModelItem :model-url="item.modelUrl" />
+                </TresGroup>
+            </Suspense>
             <TresMesh>
                 <TresBoxGeometry :args="[1, 1, 1]" />
                 <TresMeshStandardMaterial />