From 6d161ba2e986c8f6c761d5ccaee4b3ebc4636913 Mon Sep 17 00:00:00 2001 From: Florian Sylvain Date: Sat, 16 Mar 2024 21:44:36 +0100 Subject: [PATCH] feat: WIP chunk generation --- src/App.tsx | 56 +++++++++---------------- src/components/{World.tsx => Chunk.tsx} | 14 +++++-- src/components/ChunkGenerator.tsx | 47 +++++++++++++++++++++ src/components/Player.tsx | 9 +++- src/hooks/GameContext.tsx | 6 +++ 5 files changed, 91 insertions(+), 41 deletions(-) rename src/components/{World.tsx => Chunk.tsx} (86%) create mode 100644 src/components/ChunkGenerator.tsx create mode 100644 src/hooks/GameContext.tsx diff --git a/src/App.tsx b/src/App.tsx index 291778e..ae9ba7c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -3,11 +3,12 @@ import "./App.css"; import { Canvas } from "@react-three/fiber"; import { KeyboardControls } from "@react-three/drei"; import { useEffect, useRef, useState } from "react"; -import { PCFSoftShadowMap, Vector2, 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"; -import { World } from "./components/World"; +import { GameContext } from "./hooks/GameContext"; +import { ChunkGenerator } from "./components/ChunkGenerator"; const CUBES_QT = 10; @@ -36,43 +37,26 @@ function App() { className="canvas" ref={container} shadows={{ type: PCFSoftShadowMap }} - camera={{ fov: 50, frustumCulled: true, near: 0.1, far: 500 }} + camera={{ fov: 50, frustumCulled: true, near: 0.1, far: 129 }} > - {/* - - - */} - - - - - - - - - + + + + + {/* + + */} + + diff --git a/src/components/World.tsx b/src/components/Chunk.tsx similarity index 86% rename from src/components/World.tsx rename to src/components/Chunk.tsx index 8cd9fe4..acf0559 100644 --- a/src/components/World.tsx +++ b/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 { > diff --git a/src/components/ChunkGenerator.tsx b/src/components/ChunkGenerator.tsx new file mode 100644 index 0000000..80a3ba4 --- /dev/null +++ b/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([ + , + ]); + } + + 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}; +} diff --git a/src/components/Player.tsx b/src/components/Player.tsx index dd852af..f73660b 100644 --- a/src/components/Player.tsx +++ b/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); }); diff --git a/src/hooks/GameContext.tsx b/src/hooks/GameContext.tsx new file mode 100644 index 0000000..73e7846 --- /dev/null +++ b/src/hooks/GameContext.tsx @@ -0,0 +1,6 @@ +import { createContext } from "react"; +import { Vector3 } from "three"; + +export const GameContext = createContext({ + playerPosition: new Vector3(), +});