clean: complete optimization of player movements

src/App.tsx

@@ -2,21 +2,15 @@ import "./App.css";
 
 import { Canvas } from "@react-three/fiber";
 import { KeyboardControls } from "@react-three/drei";
-import { MutableRefObject, useEffect, useRef, useState } from "react";
-import { Vector2, Vector3 } from "three";
-import { Cubes } from "./components/Cubes";
+import { useEffect, useRef, useState } from "react";
+import { Vector3 } from "three";
 import { Player } from "./components/Player";
-import {
-  Bloom,
-  ChromaticAberration,
-  EffectComposer,
-  Vignette,
-} from "@react-three/postprocessing";
-import { BlendFunction } from "postprocessing";
+import { Bloom, EffectComposer, Vignette } from "@react-three/postprocessing";
+import { Cubes } from "./components/Cubes";
+
+const CUBES_QT = 10;
 
 function App() {
-  const CUBES_QT = 10;
-
   const container = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -37,7 +31,7 @@ function App() {
       className="container"
       onClick={() => container.current?.requestPointerLock()}
     >
-      <Canvas className="canvas" ref={container} shadows>
+      <Canvas className="canvas" ref={container} shadows camera={{ fov: 50 }}>
         <Cubes cubesPosition={cubes}></Cubes>
 
         <mesh
@@ -46,8 +40,11 @@ function App() {
           receiveShadow
           castShadow
         >
-          <planeGeometry attach={"geometry"} args={[100, 100]}></planeGeometry>
-          <meshLambertMaterial color={"green"}></meshLambertMaterial>
+          <planeGeometry attach={"geometry"} args={[50, 50]}></planeGeometry>
+          <meshStandardMaterial
+            toneMapped={false}
+            color={"green"}
+          ></meshStandardMaterial>
         </mesh>
 
         <KeyboardControls
@@ -60,11 +57,7 @@ function App() {
             { keys: ["ShiftLeft"], name: "sprint" },
           ]}
         >
-          <Player
-            container={
-              container as unknown as MutableRefObject<HTMLCanvasElement>
-            }
-          ></Player>
+          <Player></Player>
         </KeyboardControls>
 
         <ambientLight intensity={Math.PI / 2} />
@@ -74,37 +67,8 @@ function App() {
         {/* <gridHelper args={[100, 100]}></gridHelper> */}
         {/* <axesHelper args={[100]}></axesHelper> */}
         <EffectComposer enableNormalPass>
-          <Bloom
-            luminanceThreshold={0.3}
-            luminanceSmoothing={1.2}
-            height={300}
-          />
+          <Bloom mipmapBlur luminanceThreshold={0.4} />
           <Vignette eskil={false} offset={0.2} darkness={0.8} />
-          {/* <SSAO
-            blendFunction={BlendFunction.MULTIPLY}
-            samples={30}
-            rings={4}
-            distanceThreshold={1.0}
-            distanceFalloff={0.0}
-            rangeThreshold={0.5}
-            rangeFalloff={0.1}
-            luminanceInfluence={0.9}
-            radius={20}
-            bias={0.5}
-            worldDistanceFalloff={0.5}
-            worldDistanceThreshold={0.5}
-            worldProximityFalloff={0.5}
-            worldProximityThreshold={0.5}
-            intensity={30}
-          ></SSAO> */}
-          <ChromaticAberration
-            modulationOffset={0.02}
-            radialModulation={true}
-            offset={new Vector2(0.002, 0.002)}
-            blendFunction={BlendFunction.NORMAL}
-          />
-
-          {/* <SSR thickness={1} intensity={0.1}></SSR> */}
         </EffectComposer>
       </Canvas>
     </main>