Forem: Jorge Gómez 👨‍💻🚀

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

Jorge Gómez 👨‍💻🚀 — Mon, 26 Sep 2022 05:42:18 +0000

Continuing with the series, in this post we are going to see the real code for this project. As always, the entire project is available in my personal repo below:

jgcarrillo / react-fp-movement

Basic scene with geometries and gLTF models to control a character in first person camera

Table of contents 👇

✨ Motivation

A few months ago I started to working with React Three Fiber. I was impressed with the possibilities the library gives to you to create 3D environments. I saw a wide variety of examples in R3F website so I started to explore more about the project.

There are so many good examples out there, but I get motivated with some of them, for example, a Ping Pong game or even a simple Arkanoid clone.

Since that, I have working in so many pet projects to understand the key concepts of React Three Fiber and also Three.js. I don't consider myself a R3F pro, nor even a beginner, but now I feel confident about the fact that I can create such 3D scenarios.

I started creating basic isometric scenes…

View on GitHub

Physics 🧲

For this example we are going to use Reac Three Cannon a specific library to create physics. You can use Rapier, another cool library, but is under development right now.

To set up physics you need to import the appropriate geometry such as plane geometry, sphere geometry, etc. Then you need to establish the physics options like mass, position, etc.

In the code below you can see the floor component a 2D plane. We need that the plane has physics but no mass since in that case it would go into a downward loop.



// Floor.js

import { usePlane } from '@react-three/cannon';

const Floor = (props) => {
  const [ref] = usePlane((index) => ({ type: 'Static', mass: 0, ...props }));

  return (
    <mesh receiveShadow rotation={props.rotation} ref={ref}>
      <planeGeometry args={[1000, 1000]} />
      <meshStandardMaterial color={props.color} />
    </mesh>
  );
};

From now, every of our components will have physics as they would otherwise go into an infinite drop and behave strangely.

Important components 📚

We are not going to see all the code of the components but it's important to know some key concepts. The next component is ThreeModel.js which is the model of the three. To do this I have used a model from internet and this utility to create a React component from a gLTF.

glTF (derivative short form of Graphics Language Transmission Format or GL Transmission Format) is a standard file format for three-dimensional scenes and models. Wikipedia

The point is that you need to set up the physics as following. The important thing to know is that you need to set the size of the hit box that corresponds to the model.

In the following image from here you can see the concept.

So, with this code I have created a hit box with the same size as the three. I know it's difficult at first. We are receiving all these options through props to make the component more reusable.



// Physics for ThreeModel.js
// Don't forget to put your models inside the public folder

const [ref] = useBox((index) => ({
  type: 'Static',
  mass: 1,
  args: props.args,
  position: props.position,

  ...props,
}));

Probably the most tricky component is the character because we need to define physics, movement and also the position of the camera. It has a lot of code but we are going to see the most interesting.

We use the hook useThree to access to the state model such as camera, renderer, scene, etc. Then, we need to define the position of the world. Finally, we set up the character movement.



// BaseCharacter.js

// Access to the state model
const { camera } = useThree();

// Set the current World position
ref.current.getWorldPosition(camera.position);

// Set the direction of the character
direction.subVectors(frontVector, sideVector).normalize().multiplyScalar(SPEED).applyEuler(camera.rotation);

Another important component is the Scene. In this case I have create a basic scene* one. The important thing to know is the use of React children prop to reuse the scene.

Here, you need to notice that I'm using <PointerLockControls /> a component of Drei library to use the mouse as the same way you would use in a FPS.



import { Canvas } from '@react-three/fiber';
import { Loader, PointerLockControls } from '@react-three/drei';
import { Physics } from '@react-three/cannon';

import Lights from '../components/Lights.js';
import Floor from '../components/Floor.js';

const BasicScene = ({ children }) => {
  return (
    <div>
      <Canvas shadows camera={{ fov: 50 }}>
        <Lights />

        <Physics gravity={[0, -9.8, 0]}>
          {children}

          <Floor rotation={[Math.PI / -2, 0, 0]} color="white" />
        </Physics>

        <PointerLockControls />
      </Canvas>
      <Loader />
    </div>
  );
};

export default BasicScene;

Another importat thing is that the physics only works within Physics component.

The helper.js file contains the movement for different geometries. I'm not going to explain this because I found it on internet in one of the R3F examples and it's not difficult to set up.

Creating the scene 🎭

So, that's it! The next step is to create the scene within the App.js component. It's also important to set up the CSS styles for the canvas.



* {
  box-sizing: border-box;
}

html,
body,
canvas {
  width: 100%;
  max-height: 100vh;
  max-width: 100wh;
  height: 100%;
  margin: 0;
  padding: 0;
}

I hope you find it useful as I did. You can see the final project here. Feel free to reach me out and start creating your own projects. 💪💪

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

Jorge Gómez 👨‍💻🚀 — Fri, 23 Sep 2022 09:30:38 +0000

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.

jgcarrillo / react-fp-movement

Basic scene with geometries and gLTF models to control a character in first person camera

Table of contents 👇

✨ Motivation

There are so many good examples out there, but I get motivated with some of them, for example, a Ping Pong game or even a simple Arkanoid clone.

I started creating basic isometric scenes…

View on GitHub

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

Improving your Productivity with VIM (+ VS Code Shortcuts)

Jorge Gómez 👨‍💻🚀 — Thu, 24 Sep 2020 05:58:16 +0000

When my peers see me writing code they think I'm possessed by some kind of dark forze which drives me to use a series of strange shortcuts for them. The reality is that, with practice, I have gained a great ability to put the mouse aside.

But, to be honest, the path was hard. The vas majority Vim's gurus uses such a great amount of shortcuts, macros, and patterns that shocked me out.

The Basics

That's the entry point of this post, bring you a series of most common shortcurts that I use in my day to day as a web dev. Furthermore, there are also great shortcuts for VS Code that will take you to the next level.

Modes

i -> For normal mode. In this mode you can insert text before the cursor.
esc -> Exit insert mode. A fat cursor appears and you will able to move throught the document.
Ctrl+v -> Start visual mode (lines).
Ctrl+V -> Start visual mode (blocks).

Movement

h -> Left
j -> Down
k -> Up
l -> Right
0 -> Jump to the start of the line
$ -> Jump to the end of the line
G -> Go to the last line of the document
zz -> Go to the first line of the document

Exiting

:q! -> Quit and throw away unsaved changes.
:wq -> Write (save) and quit.

Most used shortcuts (for me)

Insert text

I -> Insert at the beginning of the line.
A -> Insert (append) at the end of the line.
o -> Append (open) a new line below the current line.
O -> Append (open) a new line above the current line.
gd -> Go to a definition (variable, function...).
gf -> Go to a specifil file.

Editing

r -> Replace a single character.
x -> Delete characters.
u -> Undo
Ctrl+r -> Redo
ciw -> Replace the entire word.
cc -> Replace the entire line

Cut and paste

yy -> Copy a line.
2yy -> Copy two lines.
p -> Paste after cursor.
P -> Paste before cursor.
dd -> Delete a line
d$ -> Delete to the end of the line.
dw -> Delete the characters of the word from the cursor position to the start of the next word.

Pro commands

line-number + G -> Go to this line.
/search-term -> Search inside the code. Move witch n.
% -> Move to matching character ({}, []).
:/s/text-to-change/new-text/gc -> Replaces the indicated text with the new one throughout the document.

VS Code

Ctrl+n -> Move forward through options in a drop-down panel.
Ctrl+p -> Move backwards through options in a drop-down panel.
Alt+arrow keys -> Move the current line up or down.
Alt+Shift+arrow keys -> Copy the current line up or down.

I hope you will find it useful for your projects. Honestly in my case I have notably improved the way I write code 😉

Cover photo by NihoNorway graphy on Unsplash

12 Useful Resources for Junior Web Developers

Jorge Gómez 👨‍💻🚀 — Wed, 16 Sep 2020 10:23:22 +0000

Hi! My name is Jorge, I'm a junior web developer based in Spain. My path started one year ago, when I decided to jump into my real dream as a web dev. I had previously programmed but I decided to take it seriously.

A few months later, my skills was improved so far. 99.9% of my improvement was thanks to a lot of resources I found on internet.

List of Resources

Diagrams | This is such a great web for draw a lot of diagrams you need. I use it for my databases as long as I need to share with my peers.
Aww App | A useful whiteboard for share your ideas. Perfect for collaborative drawing.
Docusaurus | A good tool for maintain Open Source documentation websites.
CSS Section Generator | If you want to take your website design to another level, this separator generator allows you to create different sections for your web.

Grid by example | The perfect place if you need to understand how grid layout works.
Sweet Alerts | A beautiful tool for replacement alerts. It's a npm pakage so you need to install it as a dependencie.

Regular Expressions | For those who want yo learn, build and test regular expressions.
JSFiddle | If you need to test your code and you don't want to open VS Code, JSFiddle brings you the possibility to use an online editor.
Gitignore | Node modules? logs? Try this tool to autogenerate a .gitignore file that includes all the directories and files you don't want to push into GitHub.
Carbon | Since SnapCode (and Polacode) stopped working on VS Code, Carbon was my first choice for create and share images of my code.

Typora | A minimal markdown editor (free during beta version).
Improving your Vim skills | That's an incredible-long post about Vim. If you want learn vim as a pro, you need to check it out.

That's was my first post here! so sorry if I made grammar mistakes. I hope you will find it interesting. Feel free to correct any mistakes I have made. 🙂

Cover photo by Christina on Unsplash