shadows

components/calculator.vue

@@ -9,6 +9,7 @@ const controlsState = reactive({
     maxDistance: 5,
     enablePan: false,
     enebleZoom: false,
+    maxPolarAngle: (Math.PI / 2) - 0.02,
     // distance: 3
 })
 

components/model/canvas.vue

@@ -8,7 +8,7 @@ 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]" />
+        <TresBoxGeometry :args="[8, 8, 0.05]" />
         <TresMeshStandardMaterial color="pink" />
     </TresMesh>
     <Suspense>

components/model/item.vue

@@ -16,10 +16,14 @@ box.getSize(size)
 
 const box_size = [size.x, size.y, size.z]
 
+scene.children.forEach((el:any) => {
+    el.castShadow = true
+    el.receiveShadow = true
+});
 </script>
 <template>
     <TresGroup>
-        <TresMesh :position="center" cast-shadow receive-shadow>
+        <TresMesh :position="center" cast-shadow receive-shadow v-if="false">
             <TresBoxGeometry :args="box_size" />
             <TresMeshPhysicalMaterial :opacity="0" color="pink" :transparent="true" />
         </TresMesh>