front/src/components/Promo/main.vue

@@ -23,7 +23,7 @@ const onChange = (e: any) => {
 const cameraPosition = [-6, 4, 25] as unknown as Vector3
 
 const controlsState = reactive({
-    minDistance: 5,
+    minDistance: 2,
     maxDistance: 30,
     maxPolarAngle: (Math.PI / 2) - 0.02,
     maxZoom: 1,
@@ -43,8 +43,9 @@ interface element3DType {
     description: string
     parent?: number
 }
-interface model3DType extends element3DType {
-    modelUrl?: string
+interface model3DType {
+    modelUrl?: string,
+    modelFile?: any
 }
 const models = ref<model3DType[]>([])
 const loadModels = async () => {
@@ -52,8 +53,12 @@ const loadModels = async () => {
     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}`
+        const item = {} as model3DType
+
+        item.modelUrl = `${IMAGE_URL}/${element.model_file}`
+        let { scene: loaded_scene } = await useGLTF(item.modelUrl)
+        item.modelFile = loaded_scene
+
         models.value.push(item)
     }
 }
@@ -74,7 +79,7 @@ onMounted(() => {
             </Suspense>
             <Suspense>
                 <TresGroup v-for="item in models">
-                    <ModelItem :model-url="item.modelUrl" />
+                    <ModelItem v-bind="item" />
                 </TresGroup>
             </Suspense>
             <TresMesh>

front/src/components/Promo/modelItem.vue

@@ -1,31 +1,27 @@
 <script setup lang="ts">
-import { Box3, Vector3 } from 'three';
 import { useGLTF, } from '@tresjs/cientos'
 
-const props = defineProps(['modelUrl', 'onClick'])
+const props = defineProps(['modelUrl', 'modelFile', 'onClick'])
 
-const { scene } = await useGLTF(props.modelUrl)
-const box = new Box3();
-box.expandByObject(scene.children[0]);
-let center = new Vector3();
-box.getCenter(center)
-let size = new Vector3();
-box.getSize(size)
-
-const box_size = [size.x, size.y, size.z]
-
-const show_alert = () => {
-    alert(props.modelUrl)
+let scene: any
+if (props.modelUrl) {
+    let { scene: loaded_scene } = await useGLTF(props.modelUrl)
+    scene = loaded_scene
+} else if (props.modelFile) {
+    scene = props.modelFile
 }
-scene.receiveShadow = true
-scene.castShadow = true
+function shadows_and_pos(scene: any) {
+    scene.children.forEach((el: any) => {
+        el.receiveShadow = true
+        el.castShadow = true
+        shadows_and_pos(el)
+    })
+}
+
+shadows_and_pos(scene)
 </script>
 <template>
-    <TresGroup :posiion="[0, 0, 0]">
-        <TresMesh :position="center" @click="show_alert" cast-shadow receive-shadow>
-            <TresBoxGeometry :args="box_size" />
-            <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />
-        </TresMesh>
+    <TresGroup >
         <TresMesh cast-shadow receive-shadow>
             <primitive :object="scene" />
         </TresMesh>