feat: postprocessing + shadows

src/components/Cubes.tsx

@@ -5,7 +5,7 @@ import { useFrame } from "@react-three/fiber";
 export function Cubes(props: { cubesPosition: Vector3[] }) {
   const CUBE_SPEED = 10;
   const CUBE_AMPLITUDE = 2;
-  const CUBE_HEIGHT = 2;
+  const CUBE_HEIGHT = 4;
 
   const [cubes, setCubes] = useState<Vector3[]>(
     Array.from(props.cubesPosition)
@@ -30,7 +30,12 @@ export function Cubes(props: { cubesPosition: Vector3[] }) {
   return cubes.map((cube) => {
     if (!cube) return;
     return (
-      <mesh position={cube} key={`${cube.x}-${cube.z}`}>
+      <mesh
+        position={cube}
+        key={`${cube.x}-${cube.z}`}
+        castShadow
+        receiveShadow
+      >
         <boxGeometry attach={"geometry"}></boxGeometry>
         <meshStandardMaterial
           attach={"material"}