front/src/components/Promo/main.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router';
-import { CameraControls, FBXModel, PositionalAudio, useGLTF, useProgress } from '@tresjs/cientos'
-import { TresCanvas, useRenderLoop } from '@tresjs/core';
+import { shallowRef } from 'vue';
+import { CameraControls, FBXModel, GLTFModel, PositionalAudio, useGLTF, useProgress } from '@tresjs/cientos'
+import { TresCanvas, useLoader, useRenderLoop } from '@tresjs/core';
 import { Vector3 } from 'three';
+import { GLTFLoader } from 'three/examples/jsm/Addons.js';
 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'
 import audioUrl from '../../assets/promo/sounds/sea.ogg'
-import { shallowRef } from 'vue';
-
 
 const router = useRouter()
-
 const minPan = new Vector3(-210, 0, -80);
 const maxPan = new Vector3(210, 0, 100);
 const _v = new Vector3();
@@ -45,8 +44,8 @@ onUnmounted(() => {
 const ducks: any[] = []
 const ducksRef: any[] = []
 for (let index = 0; index < 4; index++) {
-    const { scene } = await useGLTF(duckUrl)
-    ducks.push(scene)
+    // const { scene } = await useLoader(GLTFLoader, duckUrl)
+    // ducks.push(scene)
     ducksRef.push(ref())
 }
 const { onLoop } = useRenderLoop()
@@ -55,7 +54,7 @@ onLoop(() => {
     for (let index = 0; index < ducksRef.length; index++) {
         const element = ducksRef[index];
         if (element.value) {
-            element.value[0].rotation.y += 0.01
+            element.value[0].rotation.y += 0.01 * index
         }
     }
 })
@@ -83,7 +82,8 @@ onLoop(() => {
                 <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>
+                        <TresBoxGeometry :args="[100, 100, 100]" />
+                <TresMeshBasicMaterial color="red" />
                     </TresMesh>
                 </Suspense>
             </template>