Create a First Person Movement in React Three Fiber - Part 1

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 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 and Trois.js 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, a wide variety of 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 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.

<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 to know more about them.

There are many materials 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.

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.

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. 🚀