3d shadows

components/calculator.vue

@@ -1,44 +1,31 @@
 <script setup lang="ts">
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls } from '@tresjs/cientos'
-import Item from './model/item.vue';
+import { OrbitControls, vLightHelper } from '@tresjs/cientos'
+
+import Canvas from './model/canvas.vue';
 
-const onClick = (e: MouseEvent) => {
-    console.log(e)
-}
 const controlsState = reactive({
     minDistance: 0,
-    maxDistance: 100,
+    maxDistance: 5,
+    enablePan: false,
+    enebleZoom: false,
+    // distance: 3
 })
 
-// Import necessary three.js classes
-import { Mesh, BoxGeometry, MeshBasicMaterial, MeshStandardMaterial } from 'three'
-
-// Create a box geometry and a basic material
-const geometry = new BoxGeometry(1, 1, 1)
-const material = new MeshStandardMaterial({ color: 0x00ff00 })
-const meshWithMaterial = new Mesh(geometry, material)
+// const { scene: backLight } = await useGLTF('/models_light/back_light.glb')
+// const { scene: primaryLight } = await useGLTF('/models_light/primary_light.glb')
+// const { scene: secondaryLight } = await useGLTF('/models_light/secondary_light.glb')
+// console.log({ backLight, primaryLight, secondaryLight })
 
 </script>
 <template>
     <div class="container">
-        <TresCanvas clear-color="#82DBC5">
-            <TresPerspectiveCamera :position="[5, 5, 5]" />
+        <TresCanvas shadows>
+            <TresPerspectiveCamera :position="[4, 8, 4]" :distance="3" />
             <OrbitControls v-bind="controlsState" make-default />
-            <TresMesh @click="onClick" :position="[-1, -1, -1]">
-                <primitive :object="meshWithMaterial" />
-            </TresMesh>
-            <Suspense>
-                <TresGroup>
-                    <Item model-url="/models/kosynka.glb" />
-                    <Item model-url="/models/kreplaniye_planok.glb" />
-                    <Item model-url="/models/planki.glb" />
-                    <Item model-url="/models/stolb.glb" />
-                    <Item model-url="/models/verh.glb" />
-                    <Item model-url="/models/zakliopki.glb" />
-                </TresGroup>
-            </Suspense>
-            <TresDirectionalLight />
+            <Canvas />
+            <TresDirectionalLight v-light-helper :position="[2, 2, 2]" :intensity="2" color="lightgreen" cast-shadow />
+            <TresDirectionalLight v-light-helper :position="[2, 2, -2]" :intensity="1" color="yellow" cast-shadow />
             <TresAmbientLight />
         </TresCanvas>
     </div>
@@ -46,8 +33,7 @@ const meshWithMaterial = new Mesh(geometry, material)
 
 <style scoped>
 .container {
-    height: 100vh;
-    max-height: 50vw;
+    height: 600px;
     display: block;
 }
 </style>

components/model/canvas.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import Item from './item.vue';
+const onClick = (e: MouseEvent) => {
+    console.log(e)
+}
+const { renderer } = useTresContext()
+renderer.value.shadowMap.enabled = true
+</script>
+<template>
+    <TresMesh :position="[0, -1, 0]" :rotate-x="Math.PI * -0.5" receive-shadow cast-shadow>
+        <TresBoxGeometry :args="[3, 3, 0.05]" />
+        <TresMeshStandardMaterial color="pink" />
+    </TresMesh>
+    <Suspense>
+        <TresGroup :position="[0, -1, 0]">
+            <Item model-url="/models/kosynka.glb" />
+            <Item model-url="/models/kreplaniye_planok.glb" />
+            <Item model-url="/models/planki.glb" />
+            <Item model-url="/models/stolb.glb" />
+            <Item model-url="/models/verh.glb" />
+            <Item model-url="/models/zakliopki.glb" />
+        </TresGroup>
+    </Suspense>
+</template>

components/model/item.vue

@@ -1,15 +1,28 @@
 <script setup lang="ts">
 import { useGLTF } from '@tresjs/cientos'
+import { Box3, Vector3 } from 'three';
 const props = defineProps(['modelUrl'])
 const { scene } = await useGLTF(props.modelUrl)
 console.log(scene, props.modelUrl)
+scene.receiveShadow = true
+scene.castShadow = true
+
+const box = new Box3();
+box.expandByObject(scene.children[0]);
+let center = new Vector3();
+box.getCenter(center)
+let size = new Vector3();
+box.getSize(size)
+
+const box_size = [size.x, size.y, size.z]
+
 </script>
 <template>
     <TresGroup>
-        <TresGroup :position="[2, 2, 2]">
-            <TresBoxGeometry :args="[1, 1, 1]" />
-            <TresMeshNormalMaterial />
-        </TresGroup>
-        <primitive :object="scene" />
+        <TresMesh :position="center" cast-shadow receive-shadow>
+            <TresBoxGeometry :args="box_size" />
+            <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />
+        </TresMesh>
+        <primitive :object="scene" cast-shadow receive-shadow />
     </TresGroup>
 </template>