React + Three.js. Creating your own 3D shooter. Part 1

This article explores the integration and features of React Three Fiber, a library that combines React and Three.js for creating 3D graphics on the web. It discusses the advantages of using React Three Fiber, the relevance of web game development, and performance aspects to consider. The article provides a step-by-step guide on

#game-development

#javascript

#react

#threejs

#webdev

Oct 01, 2023•26m read time•From habr.com

Table of contents

Introduction About the React Three Fibre stack Relevance of Web-GameDev Game performance in modern browsers On your mark!Setting up the project and installing packages Customising the Canvas display Floor surface Basic lighting Texture for the floor surface Camera movement Adding physics The floor as a physical object Subjecting a character to the laws of physics Moving a character - creating a hook Moving a character - implementing a hook Moving a character - jump Moving the camera behind the character Generation of cubes Importing the model into the project Displaying the weapon model on the scene Adding shadows Adding shadows - correcting shadow clipping Binding weapons to a character Animation of weapon swinging while walking Recoil animation Animation during inactivity Conclusion