Understanding the Core Concepts of react-three-fiber

A Brief Background

“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

Camera

Light

Mesh

Geometry

Material

Core Concepts Concluded

Full Stack Developer | React | JavaScript | Ruby on Rails