front/src/components/Promo/main.vue

@@ -2,8 +2,8 @@
 import { useRouter } from 'vue-router';
 import { shallowRef } from 'vue';
 import { onUnmounted, reactive, ref } from 'vue';
-import { CameraControls, FBXModel, PositionalAudio, useFBX, useProgress } from '@tresjs/cientos'
 import { TresCanvas, useRenderLoop } from '@tresjs/core';
+import { CameraControls, FBXModel, PositionalAudio, useFBX, useProgress } from '@tresjs/cientos'
 import { Vector3 } from 'three';
 
 import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
@@ -43,10 +43,12 @@ onUnmounted(() => {
 
 const ducks: any[] = []
 const ducksRef: any[] = []
+const ducksObjectRef: any[] = []
 for (let index = 0; index < 4; index++) {
     const model = await useFBX(jeepUrl)
     ducks.push(model)
     ducksRef.push(ref())
+    ducksObjectRef.push(ref())
 }
 const { onLoop } = useRenderLoop()
 
@@ -60,7 +62,10 @@ onLoop(() => {
 })
 </script>
 <template>
-    <div>
+    <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
+        Загрузка {{ progress }}%
+    </div>
+    <div :class="[{ 'invisible': !hasFinishLoading }]">
         <TresCanvas window-size alpha shadows>
             <TresPerspectiveCamera :position="cameraPosition" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
@@ -74,12 +79,15 @@ onLoop(() => {
                 <FBXModel :path="jeepUrl" :scale="0.5"></FBXModel>
             </Suspense>
             <template v-for="i in 4">
-                <Suspense>
-                    <TresMesh :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i"
-                        @click="() => console.log('click on duck')" :ref="ducksRef[i - 1]">
-                        <primitive :object="ducks[i - 1]" :scale="0.25" />
+                <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>
-                </Suspense>
+                </TresGroup>
             </template>
             <TresDirectionalLight :position="lightPosition" :intensity="5" />
             <TresAmbientLight />