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

Ivan Zhukov — Mon, 02 Oct 2023 09:27:39 +0000

Hello, esteemed Dev.to contributors!

Introduction

In modern web development, the boundaries between classic and web applications are blurring every day. Today we can create not only interactive websites, but also full-fledged games right in the browser. One of the tools that makes this possible is the React Three Fiber library - a powerful tool for creating 3D graphics based on Three.js using React technology.

About the React Three Fiber stack

React Three Fiber is a wrapper over Three.js that uses the structure and principles of React to create 3D graphics on the web. This stack allows developers to combine the power of Three.js with the convenience and flexibility of React, making the process of creating an application more intuitive and organised.

At the heart of React Three Fiber is the idea that everything you create in a scene is a React component. This allows developers to apply familiar patterns and methodologies.

One of the main advantages of React Three Fiber is its ease of integration with the React ecosystem. Any other React tools can still be easily integrated when using this library.

Relevance of Web-GameDev

Web-GameDev has undergone major changes in recent years, evolving from simple 2D Flash games to complex 3D projects comparable to desktop applications. This growth in popularity and capabilities makes Web-GameDev an area that cannot be ignored.

One of the main advantages of web gaming is its accessibility. Players do not need to download and install any additional software - just click on the link in their browser. This simplifies the distribution and promotion of games, making them available to a wide audience around the world.

Finally, web game development can be a great way for developers to try their hand at gamedev using familiar technologies. Thanks to the available tools and libraries, even without experience in 3D graphics, it is possible to create interesting and high-quality projects!

Game performance in modern browsers

Modern browsers have come a long way, evolving from fairly simple web browsing tools to powerful platforms for running complex applications and games. Major browsers such as Chrome, Firefox, Edge and others are constantly being optimised and developed to ensure high performance, making them an ideal platform for developing complex applications.

One of the key tools that has fuelled the development of browser-based gaming is WebGL. This standard allowed developers to use hardware graphics acceleration, which significantly improved the performance of 3D games. Together with other webAPIs, WebGL opens up new possibilities for creating impressive web applications directly in the browser.

Nevertheless, when developing games for the browser, it is crucial to consider various performance aspects: resource optimisation, memory management and adaptation for different devices are all key points that can affect the success of a project.

On your mark!

However, words and theory are one thing, but practical experience is quite another. To really understand and appreciate the full potential of web game development, the best way is to immerse yourself in the development process. Therefore, as an example of successful web game development, we will create our own game. This process will allow us to learn key aspects of development, face real problems and find solutions to them, and see how powerful and flexible a web game development platform can be.

In a series of articles, we'll look at how to create a first-person shooter using the features of this library, and dive into the exciting world of web-gamedev!

Final demo

zy45x4-5173.csb.app

codesandbox.io

Repository on GitHub

Now, let's get started!

Setting up the project and installing packages

First of all, we will need a React project template. So let's start by installing it.

npm create vite@latest

select the React library;
select JavaScript.

Install additional npm packages.

npm install three @react-three/fiber @react-three/drei @react three/rapier zustand @tweenjs/tween.js

Then delete everything unnecessary from our project.

DEV Community: Ivan Zhukov

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

Introduction

About the React Three Fiber 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