Create a First Person Movement in React Three Fiber - Part 1
Tags: react, tutorial, reactthreefiber, threejs
Published: 2022-09-23 09:30:38

In this post I want to show you how I have created a 3D environment in **React** with **React Three Fiber**, a library that implements *Three.js* in its core.

I will try to explain myself as much clear as I can because there are a lot of concepts that go beyond programming.

I have been using *Three.js* and *React Three Fiber* for almost three months and I'm not consider myself a pro (nor even a begginer) but during this time I have been able to learn **some basic concepts** to create stunning scenes.

## Ok but, what is Three.js? 🎄

To be clear, [Three.js](https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene) is a JavaScript library to render graphics in a browser that uses WebGL.

It has a lot of possibilities but with *Three.js* you need to **imperative set all the steps** to your application such as creacte a camera, create a scene, then put this camera into this scene... you got the concept.

Because of this, many libraries emerged with the aim of using *Three.js* inside a framework. I have tried [Angular Three](https://github.com/nartc/angular-three) and [Trois.js](https://github.com/troisjs/trois) for Vue but I prefer **React Three Fiber** because of its large community, examples and documentation but feel free to give a try to the other ones.

## So, you said React Three Fiber... ⚗

Exactly, as I said before, R3F gives you a [good documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction), a wide [variety of examples](https://docs.pmnd.rs/react-three-fiber/getting-started/examples) and a very active community.

There are also many **YouTube tutorials** to give your knowledge to the next level and the creator of the library, [Paul Henschel](https://twitter.com/0xca0a) is very active on Twitter.

The **advantage** of this library as well as the others for Angular or Vue is that you only need to declare a component and the magic happen behind the scenes.

## Key Concepts

### The Mesh 🎨

Probably the most important concept you need to know is **the mesh** which is a combination of a **geometry and a material**.

```js
<mesh position={[0, 0.5, 0]}>
  <boxGeometry args={[2, 1, 2]} />
  <meshStandardMaterial color="yellow" />
</mesh>
```

### Other important things 🎇

Meshes are only the beginning, but to create a scene you need several components. Here are some of the (important ones), but you can check [the official R3F documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/your-first-scene) to know more about them.

There are [many materials](https://threejs.org/docs/index.html#api/en/materials/MeshBasicMaterial) each of them with its own parameters. Along with the meshes, there are also some **geometries** that you can use in your scenes.

- `Canvas`. This component will setup the **Scene** and the **Camera** and also render the scene every frame.

- `Lights`. Obviously to be able to see the scene and **cast shadows**.

## It's time to coding 💻

The entire code of the project is in my GitHub account, just below.

{% embed https://github.com/jgcarrillo/react-fp-movement %}

First of all we need to create a **React project** from scratch with the classic `npx create-react-app` you can use *Vite* if you prefer.

I'am using the **following folder structure** to organize my projects but you can use another.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2p9pxeob7bfb0tu4boy5.JPG)

To be clear, I'm going to explain everyone of them. Probably you can create your own code in the same file but we want to take advantage of the React library to **reuse components**.

- `Floor.js`. It's a basic geometry of a *Plane*.

- `Lights.js`. This component generate some lights for our meshes to be displayed.

- `ThreeModel.js`. With this component we can generate a React compoment from a 3D model created with Blender or similar.

- `BaseBox.js`. Used to generate a basic box geometry.

- `BaseCharacter.js`. This component generates a sphere geometry with movement.

- `BaseScene.js`. Using this component we can create a basic Three.js scene. Through props we can insert our custom scene with the same parameters.

- `helpers.js`. Some important functions, for example, the character movement.

In the next part we will continue with the example by **making the real scene** and explaining some concepts like physics. 🚀