front/src/components/Promo/main.vue

@@ -5,8 +5,6 @@ import { TresCanvas, useRenderLoop } from '@tresjs/core';
 import { vLightHelper } from '@tresjs/core'
 import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'
 
-import sunset from '../../assets/promo/models/sunset.hdr'
-
 const minPan = new Vector3(-10, 1, -5);
 const maxPan = new Vector3(5, 1, 5);
 const _v = new Vector3();
@@ -31,13 +29,30 @@ const controlsState = reactive({
 const { hasFinishLoading, progress } = await useProgress()
 const { scene: spot_light } = await useGLTF('/Spot_light.glb')
 const spot_light_item = spot_light.children[0]
+const spot_light_ref = ref()
+const spot_light_target = ref()
 
 const target = new Object3D()
-target.translateX(2)
+target.translateX(-10)
-target.translateY(-50)
+target.translateZ(10)
-console.log(target)
+target.translateY(0)
 
+const { onLoop } = useRenderLoop()
+let direction = 0.05
+onLoop(({ elapsed }) => {
+    // target.translateY(-0.01)
+    if (spot_light_target.value) {
+        const px = spot_light_target.value.position.x
+        if (px >= 10) {
+            direction = -0.05
+        } else if (px <= -10) {
+            direction = 0.05
+        }
+        spot_light_target.value.translateX(direction)
 
+    }
+})
+console.log(spot_light_target.value)
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
@@ -52,9 +67,10 @@ console.log(target)
             <Suspense>
                 <Models />
             </Suspense>
-            <TresSpotLight :position="spot_light_item.position"  color="pink"
+            <TresObject3D ref="spot_light_target" :position="[10, 1, 10]"></TresObject3D>
-                :angle="spot_light_item.angle" :penumbra="spot_light_item.penumbra" :target="target"
+            <TresSpotLight :position="spot_light_item.position" color="pink" :angle="spot_light_item.angle"
-                :intensity="400" cast-shadow v-light-helper />
+                :penumbra="spot_light_item.penumbra" :target="spot_light_target || target" :intensity="500" cast-shadow
+                ref="spot_light_ref" />
             <!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
             <TresAmbientLight :intensity="1" />
         </TresCanvas>