front/src/components/Promo/main.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
 import { CameraControls, FBXModel, PositionalAudio, useGLTF, useProgress } from '@tresjs/cientos'
-import { TresCanvas } from '@tresjs/core';
+import { TresCanvas, useRenderLoop } from '@tresjs/core';
 import { Vector3 } from 'three';
-import { onMounted, onUnmounted, reactive } from 'vue';
+import { onMounted, onUnmounted, reactive, ref } from 'vue';
 
 import modelUrl from '../../assets/promo/models/sea_fbx/source/Stronghold.fbx'
 import duckUrl from '../../assets/promo/models/rubber_duck (1)/scene.gltf'
@@ -43,10 +43,22 @@ onUnmounted(() => {
     positionalAudioRef?.value?.dispose()
 })
 const ducks: any[] = []
+const ducksRef: any[] = []
 for (let index = 0; index < 4; index++) {
     const { scene } = await useGLTF(duckUrl)
     ducks.push(scene)
+    ducksRef.push(ref())
 }
+const { onLoop } = useRenderLoop()
+
+onLoop(() => {
+    for (let index = 0; index < ducksRef.length; index++) {
+        const element = ducksRef[index];
+        if (element.value) {
+            element.value[0].rotation.y += 0.01
+        }
+    }
+})
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
@@ -68,10 +80,12 @@ for (let index = 0; index < 4; index++) {
                 <TresMeshBasicMaterial color="red" />
             </TresMesh>
             <template v-for="i in 4">
-                <TresMesh :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i"
-                    @click="() => console.log('click on duck')">
-                    <primitive :object="ducks[i - 1]" :scale="40"></primitive>
-                </TresMesh>
+                <Suspense>
+                    <TresMesh :position-x="[1, 3].includes(i) ? -300 : 300" :position-z="100 * i"
+                        @click="() => console.log('click on duck')" :ref="ducksRef[i]" cast-shadow>
+                        <primitive :object="ducks[i - 1]" :scale="40"></primitive>
+                    </TresMesh>
+                </Suspense>
             </template>
 
             <TresDirectionalLight :position="lightPosition" :intensity="15" cast-shadow />