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.

--

--

--

Full Stack Developer | React | JavaScript | Ruby on Rails

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How do I enumerate the combinations of an array using recursion in JavaScript (Recursion…

ASYNC/AWAIT and why it matters

Vue Storefront — What’s Next?

Callback in JavaScript | How does it work behind the scenes?

Real World App - Part 16: From Firebase to Firestore

The real problem with programming in Javascript

Get Reason-able with ReasonML — Part 1

Object in JavaScript

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Scholz

Victor Scholz

Full Stack Developer | React | JavaScript | Ruby on Rails

More from Medium

Ineffective, Unenforced, Title IX

Experience with Balancing WIT & College

An introduction to Markov’s and Chebyshev’s Inequality.

Journal 2