front/src/components/Promo/main.vue

@@ -4,21 +4,35 @@ import { shallowRef } from 'vue';
 import { onUnmounted, reactive, ref } from 'vue';
 import { TresCanvas, useRenderLoop } from '@tresjs/core';
 import { CameraControls, FBXModel, PositionalAudio, useFBX, useProgress } from '@tresjs/cientos'
+import { Sky } from '@tresjs/cientos'
 import { Vector3 } from 'three';
 
 import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
 import jeepUrl from '../../assets/promo/models/jeep.fbx'
-import quadroUrl from '../../assets/promo/models/quadro/scene.fbx'
+
-// const img = import.meta.glob('../../assets/promo/models/quadro/*.jpg')
+import sceneUrl from '../../assets/promo/models/quadro/scene.fbx'
-// Object.keys(img).forEach(element => {
+import andreyUrl from '../../assets/promo/models/quadro/andrey.fbx'
-//     import(element)
+const andreyModel = await useFBX(andreyUrl)
-// });
+import groundUrl from '../../assets/promo/models/quadro/ground.fbx'
+const groundModel = await useFBX(groundUrl)
+import mangalUrl from '../../assets/promo/models/quadro/mangal.fbx'
+const mangalModel = await useFBX(mangalUrl)
+import pillarUrl from '../../assets/promo/models/quadro/pillar.fbx'
+const pillarModel = await useFBX(pillarUrl)
+import pointerUrl from '../../assets/promo/models/quadro/pointer.fbx'
+const pointerModel = await useFBX(pointerUrl)
+import quadUrl from '../../assets/promo/models/quadro/quad.fbx'
+const quadModel = await useFBX(quadUrl)
+import skyUrl from '../../assets/promo/models/quadro/sky.fbx'
+const skyModel = await useFBX(skyUrl)
+import walkbayUrl from '../../assets/promo/models/quadro/walkway.fbx'
+const walkbayModel = await useFBX(walkbayUrl)
 
 import audioUrl from '../../assets/promo/sounds/sea.ogg'
 
 const router = useRouter()
-const minPan = new Vector3(-210, 0, -80);
+const minPan = new Vector3(-10, 1, -5);
-const maxPan = new Vector3(210, 0, 100);
+const maxPan = new Vector3(5, 1, 5);
 const _v = new Vector3();
 
 const onChange = (e: any) => {
@@ -28,13 +42,13 @@ const onChange = (e: any) => {
     e._camera.position.sub(_v);
 }
 
-const cameraPosition = [200, 400, 800]
+const cameraPosition = [-6, 4, 25]
 const lightPosition = [3, 3, 3]
 
 const controlsState = reactive({
-    minDistance: 300,
+    minDistance: 1,
-    maxDistance: 900,
+    maxDistance: 30,
-    maxPolarAngle: (Math.PI / 2) - 0.2,
+    maxPolarAngle: (Math.PI / 2) - 0.02,
     maxZoom: 1,
     minZoom: 0.2,
 })
@@ -66,35 +80,28 @@ onLoop(() => {
         }
     }
 })
+console.log(andreyModel)
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
         Загрузка {{ progress }}%
     </div>
     <div :class="[{ 'invisible': !hasFinishLoading }]">
-        <TresCanvas window-size alpha shadows>
+        <TresCanvas window-size alpha shadows clear-color="#87ceeb">
             <TresPerspectiveCamera :position="cameraPosition" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
-
+            <TresMesh :position="[0, 0, 0]" @click="()=>{console.log('dd')}">
-            <Suspense v-if=false>
+                <primitive :object="andreyModel" />
-                <FBXModel :path="modelUrl">
-                    <PositionalAudio ref="positionalAudioRef" :url="audioUrl" :loop="true" :inner-angle="360" />
-                </FBXModel>
-            </Suspense>
-            <Suspense>
-                <FBXModel :path="quadroUrl" :scale="50" :position-y="-10"></FBXModel>
-            </Suspense>
-            <template v-for="i in 4">
-                <TresGroup :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i" :ref="ducksRef[i - 1]">
-                    <Suspense>
-                        <primitive :object="ducks[i - 1]" :scale="0.25" :ref="ducksObjectRef[i - 1]" />
-                    </Suspense>
-                    <TresMesh @click="router.push(`main/item/${i}`)">
-                        <TresBoxGeometry :args="[110, 100, 100]" />
-                        <TresMeshNormalMaterial :transparent="true" :opacity="0" />
             </TresMesh>
-                </TresGroup>
+            <primitive :object="mangalModel" />
-            </template>
+            <primitive :object="pillarModel" />
+            <primitive :object="pointerModel" />
+            <primitive :object="quadModel" />
+            <primitive :object="walkbayModel" />
+
+            <primitive :object="groundModel" />
+            <primitive :object="skyModel" />
+
             <TresDirectionalLight :position="lightPosition" :intensity="5" />
             <TresAmbientLight />
         </TresCanvas>