fix: light position fix + tweaks

src/App.tsx

@@ -3,7 +3,7 @@ import "./App.css";
 import { Canvas } from "@react-three/fiber";
 import { KeyboardControls } from "@react-three/drei";
 import { useEffect, useRef, useState } from "react";
-import { Vector3 } from "three";
+import { PCFSoftShadowMap, Vector3 } from "three";
 import { Player } from "./components/Player";
 import { Bloom, EffectComposer, Vignette } from "@react-three/postprocessing";
 import { Cubes } from "./components/Cubes";
@@ -34,8 +34,8 @@ function App() {
       <Canvas
         className="canvas"
         ref={container}
-        shadows
+        shadows={{ type: PCFSoftShadowMap }}
-        camera={{ fov: 50, frustumCulled: true, near: 0.1, far: 100 }}
+        camera={{ fov: 50, frustumCulled: true, near: 0.1, far: 500 }}
       >
         <Cubes cubesPosition={cubes}></Cubes>
 
@@ -45,7 +45,10 @@ function App() {
           receiveShadow
           castShadow
         >
-          <planeGeometry attach={"geometry"} args={[50, 50]}></planeGeometry>
+          <planeGeometry
+            attach={"geometry"}
+            args={[5000, 5000]}
+          ></planeGeometry>
           <meshStandardMaterial
             toneMapped={false}
             color={"green"}

src/components/Player.tsx

@@ -1,6 +1,6 @@
 import { useAnimations, useGLTF, useKeyboardControls } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
-import { useEffect, useRef } from "react";
+import { MutableRefObject, useEffect, useRef } from "react";
 import {
   DirectionalLight,
   Euler,
@@ -21,8 +21,8 @@ export interface KeyPressed {
 }
 
 const PLAYER_SPEED = 4.75 * 10;
-const DRAW_DISTANCE = 50;
+const DRAW_DISTANCE = 256;
-const SHADOW_RESOLUTION = 2048;
+const SHADOW_RESOLUTION = 4096;
 const MOUSE_X_SENSITIVITY = 0.002;
 const MOUSE_Y_SENSITIVITY = 0.001;
 const ANIM_SPEED = 0.2;
@@ -35,8 +35,8 @@ export function Player(): JSX.Element {
   const model = useGLTF("/Adventurer.glb");
   const anims = useAnimations(model.animations, model.scene);
   const [, getKeys] = useKeyboardControls();
-  const lightRef = useRef<DirectionalLight>(null);
   const camera = useThree((state) => state.camera);
+  const dirLightRef: MutableRefObject<DirectionalLight | null> = useRef(null);
 
   const pivot = new Vector2();
   const moveVector = new Vector3();
@@ -174,6 +174,14 @@ export function Player(): JSX.Element {
     });
   }
 
+  function setDirLightPosition(): void {
+    dirLightRef.current?.position.set(
+      model.scene.position.x + 100,
+      100,
+      model.scene.position.z + 100
+    );
+  }
+
   useFrame((_, delta) => {
     setMoveVector(delta);
     setAnimationsState();
@@ -181,6 +189,7 @@ export function Player(): JSX.Element {
     if (someKeyPressed()) setPlayerPosition();
     setCameraPosition();
     setPlayerAnimations();
+    setDirLightPosition();
   });
 
   useEffect(() => {
@@ -201,14 +210,9 @@ export function Player(): JSX.Element {
         position={model.scene.position}
       ></primitive>
       <directionalLight
-        ref={lightRef}
+        ref={dirLightRef}
         target={model.scene}
         castShadow
-        position={[
-          model.scene.position.x + 100,
-          100,
-          model.scene.position.z + 100,
-        ]}
         shadow-mapSize={[SHADOW_RESOLUTION, SHADOW_RESOLUTION]}
         intensity={6}
       >