lamp

front/package-lock.json

@@ -817,6 +817,89 @@
         "vue": ">=3.3"
       }
     },
+    "node_modules/@tresjs/core/node_modules/@vueuse/core": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.10.0.tgz",
+      "integrity": "sha512-vexJ/YXYs2S42B783rI95lMt3GzEwkxzC8Hb0Ndpd8rD+p+Lk/Za4bd797Ym7yq4jXqdSyj3JLChunF/vyYjUw==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.10.0",
+        "@vueuse/shared": "10.10.0",
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vueuse/metadata": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.10.0.tgz",
+      "integrity": "sha512-UNAo2sTCAW5ge6OErPEHb5z7NEAg3XcO9Cj7OK45aZXfLLH1QkexDcZD77HBi5zvEiLOm1An+p/4b5K3Worpug==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vueuse/shared": {
+      "version": "10.10.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.10.0.tgz",
+      "integrity": "sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==",
+      "dependencies": {
+        "vue-demi": ">=0.14.7"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@tresjs/core/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.8",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz",
+      "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -1227,9 +1310,9 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.6.1",
+      "version": "6.6.2",
-      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.2.tgz",
-      "integrity": "sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA=="
+      "integrity": "sha512-134clD8u7cBBXdmBbXI282gHGF7T/eAbD/G7mAK2llQF62IbI4ny28IVamZVMoJSvfImC2Xxnj732hXkJvUj6g=="
     },
     "node_modules/@vue/language-core": {
       "version": "2.0.14",

front/src/components/Promo/main.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue';
-import { Vector3 } from 'three';
+import { Object3D, Vector3 } from 'three';
-import { TresCanvas } from '@tresjs/core';
+import { TresCanvas, useRenderLoop } from '@tresjs/core';
 import { vLightHelper } from '@tresjs/core'
 import { CameraControls, useGLTF, useProgress } from '@tresjs/cientos'
 
@@ -29,10 +29,14 @@ const controlsState = reactive({
     minZoom: 0.2,
 })
 
-
 const { hasFinishLoading, progress } = await useProgress()
 const { scene: spot_light } = await useGLTF('/Spot_light.glb')
 const spot_light_item = spot_light.children[0]
+
+const target = new Object3D()
+target.translateX(2)
+target.translateY(-50)
+console.log(target)
 </script>
 <template>
     <div :class="[{ 'invisible': !!hasFinishLoading }, 'loader']">
@@ -47,11 +51,11 @@ const spot_light_item = spot_light.children[0]
             <Suspense>
                 <Models />
             </Suspense>
-            <TresSpotLight :position="spot_light_item.position"
+            <TresSpotLight :position="spot_light_item.position"  color="pink"
-                :color="spot_light_item.color" :angle="spot_light_item.angle" :penumbra="spot_light_item.penumbra"
+                :angle="spot_light_item.angle" :penumbra="spot_light_item.penumbra" :target="target"
-                :intensity="spot_light_item.intensity" cast-shadow v-light-helper />
+                :intensity="300" cast-shadow v-light-helper />
             <!-- <TresDirectionalLight :position="lightPosition" :intensity="10" cast-shadow /> -->
-            <!-- <TresAmbientLight /> -->
+            <TresAmbientLight :intensity="1" />
         </TresCanvas>
     </div>
 </template>

front/src/components/Promo/modelItem.vue

@@ -17,11 +17,12 @@ const box_size = [size.x, size.y, size.z]
 const show_alert = () => {
     alert(props.modelUrl)
 }
+scene.receiveShadow = true
 scene.castShadow = true
 </script>
 <template>
     <TresGroup :posiion="[0, 0, 0]">
-        <TresMesh :position="center" @click="show_alert">
+        <TresMesh :position="center" @click="show_alert" :receive-shadow="true">
             <TresBoxGeometry :args="box_size" />
             <TresMeshBasicMaterial :opacity="0" color="pink" :transparent="true" />
         </TresMesh>

front/src/components/Promo/models.vue

@@ -27,7 +27,8 @@ const { map, normalMap } = await useTexture({
 const { renderer } = useTresContext()
 
 renderer.value.toneMapping = ACESFilmicToneMapping
-renderer.value.toneMappingExposure = 0.5
+renderer.value.toneMappingExposure = 0.25
+renderer.value.shadowMap.enabled = true
 
 const repeat = 20
 
@@ -58,7 +59,7 @@ normalMap.repeat.y = repeat
         <ModelItem modelUrl="/Mangal.glb" />
         <ModelItem modelUrl="/Pillar.glb" />
         <ModelItem modelUrl="/Pointer.glb" />
-        <ModelItem modelUrl="/Quad.glb" />
+        <ModelItem modelUrl="/quad.glb" />
         <!-- <ModelItem modelUrl="/Spot_light.glb" /> -->
         <ModelItem modelUrl="/Walkway.glb" />