Learn how to create a 3D shooter game using React Three Fiber, a powerful tool for creating 3D graphics based on React. Explore the relevance of web game development and the performance of modern browsers. Set up the project, customise the canvas display, add physics, move the character, generate cubes, import and display a 3D model, and add shadows. Also, implement animations for weapon swinging, recoil, and inactivity.
Table of contents
IntroductionAbout the React Three Fiber stackRelevance of Web-GameDevGame performance in modern browsersOn your mark!Setting up the project and installing packagesCustomising the Canvas displayFloor surfaceBasic lightingTexture for the floor surfaceCamera movementAdding physicsThe floor as a physical objectSubjecting a character to the laws of physicsMoving a character - creating a hookMoving a character - implementing a hookMoving a character - jumpMoving the camera behind the characterGeneration of cubesImporting the model into the projectDisplaying the weapon model on the sceneAdding shadowsAdding shadows - correcting shadow clippingBinding weapons to a characterAnimation of weapon swinging while walkingRecoil animationAnimation during inactivityConclusion2 Impressions