3d Maze Game.

Overview

Third-person maze game with 3d graphics featuring featuring moving enemies, HP, coins and a shooting weapon. The aim of the game is to find your way out of the maze without getting killed. The initial idea of this project started after working on my Quiz App. I wanted to create another fun experience but with the challenge of something completely different to what I've ever done before: graphics. After carrying out extensive research, it came to my surprise how easy it is to make a game in 3d in React and tools within Three.js. One of the biggest challenges to this project was the calculations, specifically the positioning in the 3d space. For example: Making a room in position x:0 and z:0 was very simple but when it came to replicating the same room in different locations with different sizes on the canvas, I had issues with doors and walls not being placed connected properly (e.g. some walls sticking out). It took a lot of diagaming to understand the logic properly and came up with some functions to calculate offsets. NOTE: If you try the live demo, please minimise the window to reduce lag. CONTROLS: Movement: Use the WASD keys to move your character. Shift: Press and hold the Shift key to run. Space: Press the Spacebar to jump. Mouse click: Click the mouse button to shoot. Q: Hold the Q key to switch to first-person view.

Technologies

React Three/Fiber
React Three/Rapier
React Three/Drei
React Spring/Three
React Redux
Zustand