front/src/components/Promo/main.vue

@@ -2,10 +2,10 @@
 import { reactive } from 'vue';
 import { Vector3 } from 'three';
 import { TresCanvas } from '@tresjs/core';
-import { CameraControls,  useProgress } from '@tresjs/cientos'
+import { vLightHelper } from '@tresjs/core'
+import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'
 
 import sunset from '../../assets/promo/models/sunset.hdr'
-console.log(sunset)
 
 const minPan = new Vector3(-10, 1, -5);
 const maxPan = new Vector3(5, 1, 5);
@@ -31,7 +31,8 @@ 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]
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
@@ -46,6 +47,9 @@ const { hasFinishLoading, progress } = await useProgress()
             <Suspense>
                 <Models />
             </Suspense>
+            <TresSpotLight :position="spot_light_item.position"
+                :color="spot_light_item.color" :angle="spot_light_item.angle" :penumbra="spot_light_item.penumbra"
+                :intensity="spot_light_item.intensity" cast-shadow v-light-helper />
             <!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
             <!-- <TresAmbientLight /> -->
         </TresCanvas>

front/src/components/Promo/models.vue

@@ -59,7 +59,7 @@ normalMap.repeat.y = repeat
         <ModelItem modelUrl="/Pillar.glb" />
         <ModelItem modelUrl="/Pointer.glb" />
         <ModelItem modelUrl="/Quad.glb" />
-        <ModelItem modelUrl="/Spot_light.glb" />
+        <!-- <ModelItem modelUrl="/Spot_light.glb" /> -->
         <ModelItem modelUrl="/Walkway.glb" />
 
         <!-- <primitive :object="groundModel" /> -->