front/src/components/Promo/main.vue

@@ -3,7 +3,7 @@ import { reactive, ref } from 'vue';
 import { Object3D, Vector3 } from 'three';
 import { TresCanvas, useRenderLoop } from '@tresjs/core';
 import { vLightHelper } from '@tresjs/core'
-import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'
+import { CameraControls, GlobalAudio, useGLTF, useProgress } from '@tresjs/cientos'
 
 const minPan = new Vector3(-10, 1, -5);
 const maxPan = new Vector3(5, 1, 5);
@@ -37,17 +37,16 @@ target.translateZ(10)
 target.translateY(0)
 
 const { onLoop } = useRenderLoop()
-let direction = 0.05
-onLoop(({ elapsed }) => {
-    // target.translateY(-0.01)
+let step = 0.05
+onLoop(() => {
     if (spot_light_target.value) {
         const px = spot_light_target.value.position.x
         if (px >= 10) {
-            direction = -0.05
+            step = -0.05
         } else if (px <= -10) {
-            direction = 0.05
+            step = 0.05
         }
-        spot_light_target.value.translateX(direction)
+        spot_light_target.value.translateX(step)
     }
 })
 </script>
@@ -58,6 +57,7 @@ onLoop(({ elapsed }) => {
     <div :class="[{ 'invisible': !hasFinishLoading }]">
         <TresCanvas window-size alpha shadows clear-color="#87ceeb">
             <TresPerspectiveCamera :position="cameraPosition" />
+            <GlobalAudio src="/sea.ogg" />
             <CameraControls v-bind="controlsState" @change="onChange" make-default />
 
             <!-- <TresGridHelper :args="[50, 50]" /> -->