shadows

front/src/components/Promo/main.vue

@@ -29,7 +29,6 @@ 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()
@@ -49,10 +48,8 @@ onLoop(({ elapsed }) => {
             direction = 0.05
         }
         spot_light_target.value.translateX(direction)
-
     }
 })
-console.log(spot_light_target.value)
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
@@ -69,8 +66,8 @@ console.log(spot_light_target.value)
             </Suspense>
             <TresObject3D ref="spot_light_target" :position="[10, 1, 10]"></TresObject3D>
             <TresSpotLight :position="spot_light_item.position" color="pink" :angle="spot_light_item.angle"
-                :penumbra="spot_light_item.penumbra" :target="spot_light_target || target" :intensity="500" cast-shadow
-                ref="spot_light_ref" />
+                :penumbra="spot_light_item.penumbra" :target="spot_light_target || target" :intensity="500"
+                cast-shadow />
             <!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
             <TresAmbientLight :intensity="1" />
         </TresCanvas>

front/src/components/Promo/modelItem.vue

@@ -19,12 +19,13 @@ const show_alert = () => {
 }
 scene.receiveShadow = true
 scene.castShadow = true
+console.log(scene, props.modelUrl)
 </script>
 <template>
     <TresGroup :posiion="[0, 0, 0]">
-        <TresMesh :position="center" @click="show_alert" :receive-shadow="true">
+        <TresMesh :position="center" @click="show_alert" receive-shadow cast-shadow>
             <TresBoxGeometry :args="box_size" />
-            <TresMeshBasicMaterial :opacity="0" color="pink" :transparent="true" />
+            <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />
         </TresMesh>
         <TresMesh>
             <primitive :object="scene" />

front/src/components/Promo/models.vue

@@ -30,6 +30,7 @@ renderer.value.toneMapping = ACESFilmicToneMapping
 renderer.value.toneMappingExposure = 0.15
 renderer.value.shadowMap.enabled = true
 
+console.log(renderer)
 const repeat = 20
 
 map.wrapS = RepeatWrapping
@@ -48,13 +49,13 @@ normalMap.repeat.y = repeat
         <Suspense>
             <Environment background :files="hdrmap" />
         </Suspense>
-        <TresMesh :rotate-x="-Math.PI * 0.5">
+        <TresMesh :rotate-x="-Math.PI * 0.5" receive-shadow>
             <TresPlaneGeometry :args="[repeat * 20, repeat * 20]" />
             <TresMeshStandardMaterial :map="map" :normalMap="normalMap" />
         </TresMesh>
         <ModelItem modelUrl="/Walkway.glb" />
         <ModelItem modelUrl="/Andrey.glb" />
-        <ModelItem modelUrl="/Area_light.glb" />
+        <!-- <ModelItem modelUrl="/Area_light.glb" /> -->
         <!-- <ModelItem modelUrl="/Ground.glb" /> -->
         <ModelItem modelUrl="/Mangal.glb" />
         <ModelItem modelUrl="/Pillar.glb" />