React + Three.js. Creating your own 3D shooter. Part 1
Tags: webdev, react, threejs, r3f
Published: 2023-10-02 09:27:39

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**](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) library - a powerful tool for creating 3D graphics based on [**Three.js**](https://threejs.org/) 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**](https://www.adobe.com/products/flashplayer/end-of-life.html) 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](https://www.khronos.org/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

{% embed https://zy45x4-5173.csb.app/ %}

{% embed https://codesandbox.io/p/github/JI0PATA/fps-game %}

Repository on [GitHub](https://github.com/JI0PATA/fps-game)

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](https://github.com/JI0PATA/fps-game/commit/4b55195e929d877d9231f35442e66346675522ed) everything unnecessary from our project.

[Section code](https://github.com/JI0PATA/fps-game/commit/4b55195e929d877d9231f35442e66346675522ed)


### Customising the Canvas display

In the **main.jsx** file, add a div element that will be displayed on the page as a scope. Insert a **Canvas** component and set the field of view of the camera. Inside the **Canvas** component place the **App** component.

![main.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/af5dv55y0znz8jmmibjb.png)

Let's add styles to **index.css** to stretch the UI elements to the full height of the screen and display the scope as a circle in the centre of the screen.

![index.css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa2fbpb28txcmfknjbae.png)

In the **App** component we add a **Sky** component, which will be displayed as the background in our game scene in the form of a sky.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b7oymow8jvhyur3zc3cl.png)


![Displaying the sky in the scene](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zs1horl7todkb6tsb349.png)

[Section code](https://github.com/JI0PATA/fps-game/commit/ede1b9eb617c1967aef2f09104c234a87b68bc97)

### Floor surface

Let's create a **Ground** component and place it in the **App** component.


![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/91resnjp955boszma2ek.png)

In **Ground**, create a flat surface element. On the Y axis move it downwards so that this plane is in the field of view of the camera. And also flip the plane on the X axis to make it horizontal.

![Ground.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r74p5xdafhge3uuoalsh.png)

Even though we specified grey as the material colour, the plane appears completely black.


![Flat on the scene](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apxdbsjygopgnwd5s84k.png)

[Section code](https://github.com/JI0PATA/fps-game/commit/e9335eb32868ba48874b7461a6d79609a074f78b)

### Basic lighting

By default, there is no lighting in the scene, so let's add a light source **ambientLight**, which illuminates the object from all sides and does not have a directed beam. As a parameter set the intensity of the glow.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iia0azth2sac4c79klcz.png)


![Illuminated plane](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81f0epirwf92oug0uaf2.png)

[Section code](https://github.com/JI0PATA/fps-game/commit/385825283562b117c4b849c0c71832e0d634ec3e)

### Texture for the floor surface

To make the floor surface not look homogeneous, we will add texture. Make a pattern of the floor surface in the form of cells repeating all along the surface.

In the **assets** folder add a PNG image with a texture.

![Added texture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyeuitkz0fik5tt1ku2s.png)

To load a texture on the scene, let's use the **useTexture** hook from the **@react-three/drei** package. And as a parameter for the hook we will pass the texture image imported into the file. Set the repetition of the image in the horizontal axes.

![Ground.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/argjoo4zdfoh7akd4za0.png)

![Texture on a plane](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9w82g34cvjrvg9b1ema.png)

[Section code](https://github.com/JI0PATA/fps-game/commit/f1c91e9106b77f6c45b5edb48e3b229ba0e1862c)

### Camera movement

Using the **PointerLockControls** component from the **@react-three/drei** package, fix the cursor on the screen so that it does not move when you move the mouse, but changes the position of the camera on the scene.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8sg99r1utikbstgevyj.png)

![Camera motion demonstration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viu0qdds1b8ub7ic01aj.GIF)

Let's make a small edit for the **Ground** component.

![Ground.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxxetaxfhpxe07lp1bek.png)

[Section code](https://github.com/JI0PATA/fps-game/commit/3eb9816f82157b88647d185ec57bb7f9de959f62)

### Adding physics

For clarity, let's add a simple cube to the scene.

```
<mesh position={[0, 3, -5]}>
    <boxGeometry />
</mesh>
```

![The cube on the scene](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utc8c2w3t6h7p0elof5d.png)

Right now he's just hanging in space.

Use the **Physics** component from the **@react-three/rapier** package to add "physics" to the scene. As a parameter, configure the gravity field, where we set the gravitational forces along the axes.

```
<Physics gravity={[0, -20, 0]}>
    <Ground />
    <mesh position={[0, 3, -5]}>
        <boxGeometry />
    </mesh>
</Physics>
```

However, our cube is inside the physics component, but nothing happens to it. To make the cube behave like a real physical object, we need to wrap it in the **RigidBody** component from the **@react-three/rapier** package.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97me24qefdpd5ya50ynh.png)

After that, we will immediately see that every time the page reloads, the cube falls down under the influence of gravity.

![Сube fall](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qvcgzdl2ivz208j3eyz.GIF)

But now there is another task - it is necessary to make the floor an object with which the cube can interact, and beyond which it will not fall.

[Section code](https://github.com/JI0PATA/fps-game/commit/1f564e9836554b644d43dd75d4644aa9cd5159b1)

### The floor as a physical object

Let's go back to the **Ground** component and add a **RigidBody** component as a wrapper over the floor surface.

![Ground.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqz1c4ojczl8h55bkgr2.png)

Now when falling, the cube stays on the floor like a real physical object.

![Falling cube on a plane](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkhr8m1kpqvsir6yw3n0.GIF)

[Section code](https://github.com/JI0PATA/fps-game/commit/31fe05543209c6828b7d5b69f06189e9f48a124a)

### Subjecting a character to the laws of physics

Let's create a **Player** component that will control the character on the scene.

The character is the same physical object as the added cube, so it must interact with the floor surface as well as the cube on the scene. That's why we add the **RigidBody** component. And let's make the character in the form of a capsule.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r85p8ksnoxa1edpgfecc.png)

Place the **Player** component inside the Physics component.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zst8lzm76kacng5zuu6g.png)

Now our character has appeared on the scene.

![A character in capsule form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56duyjbc3vsb1ichuf6e.png)

[Section code](https://github.com/JI0PATA/fps-game/commit/8877590a4767a281e71b0d0e4d04e49ad4660773)

### Moving a character - creating a hook

The character will be controlled using the **WASD** keys, and jump using the **Spacebar**.

With our own react-hook, we implement the logic of moving the character.

Let's create a **hooks.js** file and add a new **usePersonControls** function there.

Let's define an object in the format {"keycode": "action to be performed"}. Next, add event handlers for pressing and releasing keyboard keys. When the handlers are triggered, we will determine the current actions being performed and update their active state. As a final result, the hook will return an object in the format {"action in progress": "status"}.

![hooks.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5yhdyiqoxlqhmnz1h2cj.png)

[Section code](https://github.com/JI0PATA/fps-game/commit/4e83142bdd6e843e7bc6f434801d3a0817d0cd4e)

### Moving a character - implementing a hook

After implementing the **usePersonControls** hook, it should be used when controlling the character. In the **Player** component we will add motion state tracking and update the vector of the character's movement direction. 

We will also define variables that will store the states of the movement directions.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15kxned83tb1hfftr7xa.png)

To update the character's position, let's **useFrame** provided by the **@react-three/fiber** package. This hook works similarly to **requestAnimationFrame** and executes the body of the function about 60 times per second.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1cs4qtvhnxeklduwco9.png)

> **Code Explanation:**

> **1. const playerRef = useRef();**
> Create a link for the player object. This link will allow direct interaction with the player object on the scene.

> **2. const { forward, backward, left, right, jump } = usePersonControls();**
> When a hook is used, an object with boolean values indicating which control buttons are currently pressed by the player is returned.

> **3. useFrame((state) => { ... });**
> The hook is called on each frame of the animation. Inside this hook, the player's position and linear velocity are updated. 

> **4. if (!playerRef.current) return;**
> Checks for the presence of a player object. If there is no player object, the function will stop execution to avoid errors.

> **5. const velocity = playerRef.current.linvel();**
> Get the current linear velocity of the player.

> **6. frontVector.set(0, 0, backward - forward);**
> Set the forward/backward motion vector based on the pressed buttons.

> **7. sideVector.set(left - right, 0, 0);**
> Set the left/right movement vector.

> **8. direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(MOVE_SPEED);**
> Calculate the final vector of player movement by subtracting the movement vectors, normalising the result (so that the vector length is 1) and multiplying by the movement speed constant.

> **9. playerRef.current.wakeUp();**
> "Wakes up" the player object to make sure it reacts to changes. If you don't use this method, after some time the object will "sleep" and will not react to position changes.

> **10. playerRef.current.setLinvel({ x: direction.x, y: velocity.y, z: direction.z });**
> Set the player's new linear velocity based on the calculated direction of movement and keep the current vertical velocity (so as not to affect jumps or falls).

As a result, when pressing the **WASD** keys, the character started moving around the scene. He can also interact with the cube, because they are both physical objects.

![Character movement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i2r9xnyr5dwgcc4mz3hr.GIF)

[Section code](https://github.com/JI0PATA/fps-game/commit/e385028ce949545cf58ade19dfdb8250643498d1)

### Moving a character - jump

In order to implement the jump, let's use the functionality from the **@dimforge/rapier3d-compat** and **@react-three/rapier** packages. In this example, let's check that the character is on the ground and the jump key has been pressed. In this case, we set the character's direction and acceleration force on the Y-axis.

For **Player** we will add mass and block rotation on all axes, so that he will not fall over in different directions when colliding with other objects on the scene.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7q28cyh7g2kpn8dsoca.png)

> **Code Explanation:**

> 1. **const world = rapier.world;**
> Gaining access to the **Rapier** physics engine scene. It contains all physical objects and manages their interaction.

> 2. **const ray = world.castRay(new RAPIER.Ray(playerRef.current.translation(), { x: 0, y: -1, z: 0 }));**
> This is where "raycasting" (raycasting) takes place. A ray is created that starts at the player's current position and points down the y-axis. This ray is "cast" into the scene to determine if it intersects with any object in the scene.

> 3. **const grounded = ray && ray.collider && Math.abs(ray.toi) <= 1.5;**
> The condition is checked if the player is on the ground:

> - **ray** - whether the **ray** was created;

> - **ray.collider** - whether the ray collided with any object on the scene;

> - **Math.abs(ray.toi)** - the "exposure time" of the ray. If this value is less than or equal to the given value, it may indicate that the player is close enough to the surface to be considered "on the ground".

You also need to modify the **Ground** component so that the raytraced algorithm for determining the "landing" status works correctly, by adding a physical object that will interact with other objects in the scene.

![Ground.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfrbafl83k7q6hushbzq.png)

Let's raise the camera a little higher for a better view of the scene.


![main.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8d6zzpvj5pg6egn4jznf.png)

![Character jumps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sikur9w4q0khyovyubht.gif)

Section code
* [First commit](https://github.com/JI0PATA/fps-game/commit/bc2c22d9661defb4e645fac17e63457505604ac9)
* [Second commit](https://github.com/JI0PATA/fps-game/commit/f5bad070b78677e9924fc4599a2025baf7dffb09)

### Moving the camera behind the character

To move the camera, we will get the current position of the player and change the position of the camera every time the frame is refreshed. And for the character to move exactly along the trajectory, where the camera is directed, we need to add **applyEuler**.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1pakhpm7os9ye48u8cmn.png)

> **Code Explanation:**

> The **applyEuler** method applies rotation to a vector based on specified Euler angles. In this case, the camera rotation is applied to the **direction** vector. This is used to match the motion relative to the camera orientation, so that the player moves in the direction the camera is rotated.

Let's slightly adjust the size of **Player** and make it taller relative to the cube, increasing the size of **CapsuleCollider** and fixing the "jump" logic.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zipboc3ag69g88oy77z.png)


![Moving the camera](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbkureuddexfj9w9gui0.GIF)

Section code
* [First commit](https://github.com/JI0PATA/fps-game/commit/74e2206a9d16d78268224d9d451cd2405ec162ab)
* [Second commit](https://github.com/JI0PATA/fps-game/commit/0063ea91b5981e7ce2be89b71d73a9f2d69a624a)

### Generation of cubes

To make the scene not feel completely empty, let's add cube generation. In the json file, list the coordinates of each of the cubes and then display them on the scene. To do this, create a file **cubes.json**, in which we will list an array of coordinates.

```
[
  [0, 0, -7],
  [2, 0, -7],
  [4, 0, -7],
  [6, 0, -7],
  [8, 0, -7],
  [10, 0, -7]
]
```

In the **Cube.jsx** file, create a **Cubes** component, which will generate cubes in a loop. And **Cube** component will be directly generated object.

```
import {RigidBody} from "@react-three/rapier";
import cubes from "./cubes.json";

export const Cubes = () => {
    return cubes.map((coords, index) => <Cube key={index} position={coords} />);
}

const Cube = (props) => {
    return (
        <RigidBody {...props}>
            <mesh castShadow receiveShadow>
                <meshStandardMaterial color="white" />
                <boxGeometry />
            </mesh>
        </RigidBody>
    );
}
```

Let's add the created **Cubes** component to the **App** component by deleting the previous single cube.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkucql8nt043k79u0x6y.png)

![Generation of cubes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ug92paizn2kmlh754hqx.GIF)

[Section code](https://github.com/JI0PATA/fps-game/commit/357405aab1cf8f49699397c7bcf07fa9ca7b667d)

### Importing the model into the project

Now let's add a 3D model to the scene. Let's add a weapon model for the character. Let's start by looking for a 3D model. For example, let's take [this one](https://sketchfab.com/3d-models/low-poly-aks-74u-4aa2f92e016c434eafdba67b238bb7fb).

Download the model in GLTF format and unpack the archive in the root of the project.

In order to get the format we need to import the model into the scene, we will need to install the **gltf-pipeline** add-on package.

`npm i -D gltf-pipeline`

Using the **gltf-pipeline** package, reconvert the model from the **GLTF format** to the **GLB format**, since in this format all model data are placed in one file. As an output directory for the generated file we specify the **public** folder.

`gltf-pipeline -i weapon/scene.gltf -o public/weapon.glb`

Then we need to generate a react component that will contain the markup of this model to add it to the scene. Let's use the [official resource](https://gltf.pmnd.rs/) from the **@react-three/fiber** developers. 

Going to the converter will require you to load the converted **weapon.glb** file.

Using drag and drop or Explorer search, find this file and download it.

![Converted model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv5t3y6yjbfeyv6w0n50.png)

In the converter we will see the generated react-component, the code of which we will transfer to our project in a new file **WeaponModel.jsx**, changing the name of the component to the same name as the file.

[Section code](https://github.com/JI0PATA/fps-game/commit/0621b9ac3ab267dbc94a99264662d9d896f80207)

### Displaying the weapon model on the scene

Now let's import the created model to the scene. In **App.jsx** file add **WeaponModel** component.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cvpf5s9ol9tz8aw14sm.png)

![Demonstration of the imported model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xbtai5v514f3tlzb399.GIF)

[Section code](https://github.com/JI0PATA/fps-game/commit/2f3aae04743b0f87724c723bb68ad71e5cbca53b)

### Adding shadows

At this point in our scene, none of the objects are casting shadows.

To enable **shadows** on the scene you need to add the **shadows** attribute to the **Canvas** component.

![main.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93kzaek3ltusj2go7rxw.png)

Next, we need to add a new light source. Despite the fact that we already have **ambientLight** on the scene, it cannot create shadows for objects, because it does not have a directional light beam. So let's add a new light source called **directionalLight** and configure it. The attribute to enable the "**cast**" shadow mode is **castShadow**. It is the addition of this parameter that indicates that this object can cast a shadow on other objects.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/song3on9si3dphyf1gbz.png)

After that, let's add another attribute **receiveShadow** to the **Ground** component, which means that the component in the scene can receive and display shadows on itself.

![Ground.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3mnka27xcvo35kxjmc5.png)

![The model casts a shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bumyixdxkktuj3ogi5jq.png)

Similar attributes should be added to other objects on the scene: cubes and player. For the cubes we will add **castShadow** and **receiveShadow**, because they can both cast and receive shadows, and for the player we will add only **castShadow**.

Let's add **castShadow** for **Player**.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fywdqz11egxglrg5pszf.png)

Add **castShadow** and **receiveShadow** for **Cube**.

![Cube.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zj8eebfo3v0xckgyy9n9.png)

![All objects on scene cast a shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ppf8la65kvo5ictvi4p6.GIF)

[Section code](https://github.com/JI0PATA/fps-game/commit/9a1c30993bf65f8dfdb7230f42d03c38d0682bb8)

### Adding shadows - correcting shadow clipping

If you look closely now, you will find that the surface area on which the shadow is cast is quite small. And when going beyond this area, the shadow is simply cut off.

![Shadow cropping](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wt1ta7e99d4m0rk8mn6e.GIF)

The reason for this is that by default the camera captures only a small area of the displayed shadows from **directionalLight**. We can for the **directionalLight** component by adding additional attributes **shadow-camera-(top, bottom, left, right)** to expand this area of visibility. After adding these attributes, the shadow will become slightly blurred. To improve the quality, we will add the **shadow-mapSize** attribute.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5a9aklj9aubo0or1zjh.png)

[Section code](https://github.com/JI0PATA/fps-game/commit/6fb490223ef97707fa4c465ae478c5f415ee6661)

### Binding weapons to a character

Now let's add first-person weapon display. Create a new **Weapon** component, which will contain the weapon behaviour logic and the 3D model itself.

```
import {WeaponModel} from "./WeaponModel.jsx";

export const Weapon = (props) => {
    return (
        <group {...props}>
            <WeaponModel />
        </group>
    );
}
```

Let's place this component on the same level as the **RigidBody** of the character and in the **useFrame** hook we will set the position and rotation angle based on the position of the values from the camera.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiou1ztcl741rmrr8zxg.png)

![First-person weapon model display](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3l1bppukustl3nidurr.GIF)

[Section code](https://github.com/JI0PATA/fps-game/commit/fbe4dccdfe6de98e97aad043e7083b34f3a81a7f)

### Animation of weapon swinging while walking

To make the character's gait more natural, we will add a slight wiggle of the weapon while moving. To create the animation we will use the installed **tween.js** library.

The **Weapon** component will be wrapped in a group tag so that you can add a reference to it via the **useRef** hook.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tnmhzahw7vrrqrga1uh.png)

Let's add some **useState** to save the animation.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wambx1iyiv0gmkul1gvk.png)

Let's create a function to initialise the animation.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p7ju9or81nyoal7w58a.png)

> **Code Explanation:**

> 1. **const twSwayingAnimation = new TWEEN.Tween(currentPosition) ...**
> Creating an animation of an object "swinging" from its current position to a new position.

> 2. **const twSwayingBackAnimation = new TWEEN.Tween(currentPosition) ...**
> Creating an animation of the object returning back to its starting position after the first animation has completed.

> 3. **twSwayingAnimation.chain(twSwayingBackAnimation);**
> Connecting two animations so that when the first animation completes, the second animation automatically starts.

In **useEffect** we call the animation initialisation function.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrtoz3can91dq14eti1c.png)

Now it is necessary to determine the moment during which the movement occurs. This can be done by determining the current vector of the character's direction.

If character movement occurs, we will refresh the animation and run it again when finished.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qxsimc6fva5co7fx9wit.png)

> **Code Explanation:**

> 1. **const isMoving = direction.length() > 0;**
> Here the object's movement state is
checked. If the direction vector has a length greater than 0, it means that the object has a direction of movement.

> 2. **if (isMoving && isSwayingAnimationFinished) { ... }**
> This state is executed if the object is moving and the "swinging" animation has finished.

In the **App** component, let's add a **useFrame** where we will update the tween animation.

![App.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sc6du50vztex64ib227m.png)

> **TWEEN.update()** updates all active animations in the **TWEEN.js** library. This method is called on each animation frame to ensure that all animations run smoothly.

Section code:
* [First commit](https://github.com/JI0PATA/fps-game/commit/3e986e87f1daa1ed9e20fabc7675ca83142d1d78)
* [Second commit](https://github.com/JI0PATA/fps-game/commit/12abbcd9d5b922e8766b859ff82272de08099c06)

### Recoil animation

We need to define the moment when a shot is fired - that is, when the mouse button is pressed. Let's add **useState** to store this state, **useRef** to store a reference to the weapon object, and two event handlers for pressing and releasing the mouse button.

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/skxdt2hstku20qzlu28q.png)

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4ke7w98t944o8cbrp9d.png)

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jale7g9uhgfvs4e070bn.png)

Let's implement a recoil animation when clicking the mouse button. We will use **tween.js** library for this purpose. 

Let us define constants for recoil force and animation duration.

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lfvqnotkm1trdqo7bou.png)

As with the weapon wiggle animation, we add two useState states for the recoil and return to home position animation and a state with the animation end status.

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evye2ui2avcgvh7593xp.png)

Let's make functions to get a random vector of recoil animation - **generateRecoilOffset** and **generateNewPositionOfRecoil**.

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8ks8c7gom330a8mv5fe.png)

Create a function to initialise the recoil animation. We will also add **useEffect**, in which we will specify the "shot" state as a dependency, so that at each shot the animation is initialised again and new end coordinates are generated.

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4in2uxi4pc5uwpbznqk.png)

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tsaz6nmujwosiqp6yzig.png)

And in **useFrame**, let's add a check for "holding" the mouse key for firing, so that the firing animation doesn't stop until the key is released.

![Weapon.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/doqiot4xls39ev8dvkub.png)

![Recoil animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55sis3bksg5dwpvzg98c.GIF)

[Section code](https://github.com/JI0PATA/fps-game/commit/8a1a38b6402503d87b05dfc4d83834d5d9ed3a9c)

### Animation during inactivity

Realise the animation of "inactivity" for the character, so that there is no feeling of the game "hanging".

To do this, let's add some new states via **useState**.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de0xzc6agbaot1ucyo35.png)

Let's fix the initialisation of the "wiggle" animation to use values from the state. The idea is that different states: walking or stopping, will use different values for the animation and each time the animation will be initialised first.

![Player.jsx](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ob0kqp07j7njou0rbbk.png)

![Idle animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c7x9w2rq99mbx97d9na9.GIF)

### Conclusion

In this part we have implemented scene generation and character movement. We also added a weapon model, recoil animation when firing and at idle. In the next part we will continue to refine our game, adding new functionality.