feat: postprocessing + shadows

src/App.tsx

@@ -1,16 +1,12 @@
 import "./App.css";
 
 import { Canvas } from "@react-three/fiber";
-import {
-  KeyboardControls,
-  Sparkles,
-  Text,
-  TransformControls,
-} from "@react-three/drei";
+import { KeyboardControls } from "@react-three/drei";
 import { MutableRefObject, useEffect, useRef, useState } from "react";
 import { Vector3 } from "three";
 import { Cubes } from "./components/Cubes";
 import { Player } from "./components/Player";
+import { Bloom, EffectComposer, Vignette } from "@react-three/postprocessing";
 
 function App() {
   const CUBES_QT = 20;
@@ -35,35 +31,21 @@ function App() {
       className="container"
       onClick={() => container.current?.requestPointerLock()}
     >
-      <Canvas className="canvas" ref={container}>
+      <Canvas className="canvas" ref={container} shadows>
         <Cubes cubesPosition={cubes}></Cubes>
-        <TransformControls position={[20, 10, 0]}>
-          <Text
-            color={"green"}
-            fontSize={8}
-            anchorX={"center"}
-            anchorY={"middle"}
-          >
-            Bonsoir
-          </Text>
-        </TransformControls>
-        <group>
-          <Sparkles
-            color={"blue"}
-            count={100}
-            size={20}
-            scale={[20, 10, 20]}
-            speed={25}
-            position={[20, 0, 20]}
-          ></Sparkles>
-        </group>
-        <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 0]}>
+
+        <mesh
+          rotation={[-Math.PI / 2, 0, 0]}
+          position={[0, 0, 0]}
+          receiveShadow
+        >
           <planeGeometry attach={"geometry"} args={[100, 100]}></planeGeometry>
           <meshStandardMaterial
             attach={"material"}
-            color={"lightblue"}
+            color={"green"}
           ></meshStandardMaterial>
         </mesh>
+
         <KeyboardControls
           map={[
             { keys: ["w", "ArrowUp"], name: "moveForward" },
@@ -80,11 +62,32 @@ function App() {
             }
           ></Player>
         </KeyboardControls>
+
         <ambientLight intensity={Math.PI / 2} />
         <directionalLight
-          intensity={Math.PI / 2}
-          position={[2, 2, 2]}
-        ></directionalLight>
+          castShadow
+          position={[100, 100, 100]}
+          shadow-mapSize={[4096, 4096]}
+          intensity={5}
+        >
+          <orthographicCamera
+            attach="shadow-camera"
+            args={[-50, 50, 50, -50]}
+          />
+        </directionalLight>
+
+        <color args={["lightblue"]} attach={"background"}></color>
+        <fog attach={"fog"} args={["lightblue", 0, 100]}></fog>
+        <gridHelper args={[100, 100]}></gridHelper>
+        <axesHelper args={[100]}></axesHelper>
+        <EffectComposer>
+          <Bloom
+            luminanceThreshold={0.2}
+            luminanceSmoothing={0.8}
+            height={300}
+          />
+          <Vignette eskil={false} offset={0.2} darkness={0.8} />
+        </EffectComposer>
       </Canvas>
     </main>
   );