Understanding the Core Concepts of react-three-fiber
A Brief Background
The first thing you might be asking is, “What is react-three-fiber?”. According to the documentation:
“react-three-fiber is a React renderer for three.js on the web and react-native”.
The renderer is responsible for rendering React components to the DOM and native views. This means that we are able to create regular React components and let react-three-fiber handle converting those components into three.js primitives (3D objects).
Now the next thing you might be asking is, “Uh… what is three.js?”. Another snippet taken from the documentation gives us that answer:
“Three.js is a 3D library that tries to make it as easy as possible to get 3D content on a webpage. Three.js is often confused with WebGL since more often than not, but not always, three.js uses WebGL to draw 3D. WebGL is a very low-level system that only draws points, lines, and triangles. To do anything useful with WebGL generally requires quite a bit of code and that is where three.js comes in. It handles stuff like scenes, lights, shadows, materials, textures, 3d math, all things that you’d have to write yourself if you were to use WebGL directly.”
So if we were to give a quick outline of how this works in your browser, you’d have react-three-fiber working on top of three.js, which works as a wrapper on top of WebGL, and in turn three.js does all the heavy lifting for you to get all that fun 3D magic on the webpage.
With all of that out of the way, let’s dive into some core concepts of react-three-fiber so you can get to work on your first 3D application!
Scene
You may see the word “scene” mentioned in the documentation. This is simply where everything takes place. In other words, it is your x, y, z 3D space.
Camera
Now that you have your scene, the camera is how it’s viewed. You can use various types of cameras to change how you scene is displayed.
Light
Scenes are not automatically lit and it’s something you need to add manually. The different types in the image below will all change how your object appears in your scene. Ambient light comes from all directions, directional light comes from one side, point light comes from a particular point on one side, and spot light is most similar to a real world spot light.
Mesh
The mesh is what we place into our scene at a specific coordinate. It accepts a geometry to specify the shape of your object, a material for surface level effects, and it allows for the attachment of event handlers so that you can interact with it.
Geometry
The geometry is how specific shapes are assigned to the mesh in your scene. A sphere, box, cone, and cylinder are only a handful of the objects that can be created. You can find a full list here in the documentation.
Material
The material is what is applied to the outer surface of your mesh. Choosing basic, lambert, phong, or normal will all affect how light interacts with your object. Different materials can make your scene more or less realistic.
Core Concepts Concluded
Understanding these core concepts will make your life way easier when you make the plunge into the Javascript 3D world. I urge you to read up on the documentation listed below.
