feat: WIP chunk generation

src/components/Chunk.tsx

@@ -1,5 +1,6 @@
 import {
   ClampToEdgeWrapping,
+  FrontSide,
   RepeatWrapping,
   TextureLoader,
   Vector2,
@@ -7,11 +8,15 @@ import {
 } from "three";
 import { ImprovedNoise } from "three/examples/jsm/Addons.js";
 
-export function World(props: { position: Vector2; seed: number }): JSX.Element {
+export function Chunk(props: { position: Vector2; seed: number }): JSX.Element {
   const size = 100;
-  const scale = 3;
+  const scale = 1.5;
   const amplitude = 30;
-  const overlap = 0.5; // Amount of overlap between chunks
+  const overlap = 0.5;
+  const geometry = 50;
+  const chunkSize = 100;
+
+  const adjustedGeometry = geometry + overlap * 2;
 
   const noise = (x: number, y: number): number => {
     const noise = new ImprovedNoise();
@@ -66,7 +71,7 @@ export function World(props: { position: Vector2; seed: number }): JSX.Element {
       >
         <planeGeometry
           attach="geometry"
-          args={[100, 100, 100 + overlap * 2, 100 + overlap * 2]}
+          args={[chunkSize, chunkSize, adjustedGeometry, adjustedGeometry]}
         ></planeGeometry>
         <meshStandardMaterial
           toneMapped={false}
@@ -74,6 +79,7 @@ export function World(props: { position: Vector2; seed: number }): JSX.Element {
           map={grassTexture}
           displacementMap={displacementMap}
           displacementScale={amplitude}
+          shadowSide={FrontSide}
         />
       </mesh>
     </group>

src/components/ChunkGenerator.tsx

@@ -0,0 +1,47 @@
+import { useContext, useEffect, useState } from "react";
+import { GameContext } from "../hooks/GameContext";
+import { useFrame } from "@react-three/fiber";
+import { Vector2 } from "three";
+import { Chunk } from "./Chunk";
+
+export function ChunkGenerator(): JSX.Element {
+  const { playerPosition } = useContext(GameContext);
+  const [chunks, setChunks] = useState([] as JSX.Element[]);
+
+  const [lastPlayerPosition] = useState(new Vector2(0, 0));
+
+  const chunkPosVec2 = new Vector2();
+
+  function generateChunk(x: number, y: number) {
+    setChunks([
+      <Chunk
+        key={`${x}-${y}`}
+        position={chunkPosVec2.set(x * 100, y * 100)}
+        seed={897624}
+      />,
+    ]);
+  }
+
+  useEffect(() => {
+    generateChunk(0, 0);
+  }, []);
+
+  useFrame(() => {
+    const playerX = Math.floor(playerPosition.x / 100 + 0.5);
+    const playerY = Math.floor(playerPosition.z / 100 + 0.5);
+
+    // generateChunk(playerX, playerY);
+    // console.log("player", playerX, playerY);
+
+    // // every time the player moves to a new chunk, generate 3x3 chunks around the player
+    // for (let x = -1; x <= 1; x++) {
+    //   for (let y = -1; y <= 1; y++) {
+    //     generateChunk(playerX + x, playerY + y);
+    //   }
+    // }
+
+    lastPlayerPosition.set(playerX, playerY);
+  });
+
+  return <>{chunks}</>;
+}

src/components/Player.tsx

@@ -1,6 +1,6 @@
 import { useAnimations, useGLTF, useKeyboardControls } from "@react-three/drei";
 import { useFrame, useThree } from "@react-three/fiber";
-import { MutableRefObject, useEffect, useRef } from "react";
+import { MutableRefObject, useContext, useEffect, useRef } from "react";
 import {
   DirectionalLight,
   Euler,
@@ -10,6 +10,7 @@ import {
   Vector3,
 } from "three";
 import { AnimationState } from "../models/Animations";
+import { GameContext } from "../hooks/GameContext";
 
 export interface KeyPressed {
   moveForward: boolean;
@@ -53,6 +54,8 @@ export function Player(): JSX.Element {
   ];
   const lastAnimState = {} as AnimationState;
 
+  const useGameContext = useContext(GameContext);
+
   const setAnimState = (name: string, isPlaying: boolean): void => {
     const anim = animsState.find((anim) => anim.name === name);
     if (!anim) return;
@@ -148,6 +151,7 @@ export function Player(): JSX.Element {
       rotateBackwards();
     }
     interpolatePlayerQuaternionToTargetRotation();
+    useGameContext.playerPosition.copy(model.scene.position);
   }
 
   function setCameraPosition(): void {
@@ -200,6 +204,9 @@ export function Player(): JSX.Element {
       }
     });
     model.scene.position.y = 10;
+    if (dirLightRef.current) {
+      dirLightRef.current.shadow.bias = -0.0001;
+    }
     window.addEventListener("mousemove", onMouseMove);
     return () => window.removeEventListener("mousemove", onMouseMove);
   });