Using Three.js with React

Using Three.js with React
April 13, 2023
Anyone who has had a glance at Web 3D technologies has definitely heard about Three.js. Three.js is a tool that conveniently provides all the power of WebGL, so your 3D scene not only looks good, but is also written neatly and readable for every developer. As you know, 3D content is rendered in WebGL, while the context is provided by a canvas DOM element. WebGL context has an empirical API, while one of the most popular JS UI libraries, React, propagates a functional, declarative approach. Therefore, you may wonder, can I work with WebGL declaratively, too? Spoiler - you shouldn’t!

Meet React Three Fiber

 

React Three Fiber is basically a React wrapper for Three.js. You caneasily write everything you canwrite with Vanilla Three.js, while keeping React coding standards and generalreadability at a high level. Also, Three Fiber uses all the modern Reactdevelopment and provides a rich interface via custom hooks and propsinfrastructure.

 

How does it work? If you have previouslyworked with Three.js, you should remember that it requires you to create thescene and camera. Then you should set up Raycasting for the interactions withyour 3D elements, render loop to handle animations, and probably set up tonemapping and screen resize handling. React Three Fiber does this out of the box when you create a <Canvas /> element. When you add objects - Three.js basicallydoes the same. It compiles your declarative React-styled code to imperativeThree.js native code, served to the client.

 

To show you the difference - I will write asmall scene using React Three Fiber and just regular Three.js. To understandthe code below, you should be familiar with such basic 3D modeling anddevelopment concepts as scene, camera, mesh, geometry, and material.

Here it is - just a minor client applicationwith two rotating cubes.

 

This is how it looks with plain Three.js:


You can write anything you want this way, but this is still not the most convenient way to work with 3D. What about the React implementation? Here it is how looks with React:

 

However, if you are a React developer usingReact Three Fiber, you can easily avoid this with attributes that areintuitively comprehensive for every developer - onClick, onPointerOver,and onPointerOut:


Caveats

Using Three.js looks like every Reactdeveloper’s dream. However, you must consider the specifics of <canvas> rendering if you want touse React Context. Three.js elements with React Three Fiber can easily acceptyour props even from outside of the canvas environment. Nonetheless, first ofall you have to understand 3D scene architecture concepts and Three.js to startworking. The nature of your previous experience doesn’t matter so much. It canbe either previous experience with Three.js or game development using moderngamedev engines. However, it is important to have a firm understanding of 3Ddevelopment principles before starting React Three Fiber. Its community isn’tvery rich, so you will have to find a lot of solutions on your own.

 

Also, you should consider that DOM and WebGLrenderers have differentcontext APIs[1] .This basically means that if you want to use React Context and pass its propsdeeper to React Three Fiber components, you have to consider adding a contextprovider inside your WebGLenvironment, under the <Canvas />component. If you try to use it without a dedicated provider for the canvas elements,you won’t get any context data.

 

Last, but not least, you want to keep in mindthe optimization - better from the beginning. There are a lot of differentstrategies for 3D content optimization, such as on-demand rendering, triggeringmanual frames, re-using geometry and materials, performance scaling,instancing, geometry caching, etc. However, this seems like a theme for anotherblog. Here you can read more about it.

 

Conclusion

As you may have seen, React-three-fiber notonly allows you to write the same functionality code, but also to keep it muchcleaner.  It also prevents you fromhaving to write logic for basic functionalities like hover and click. Don’tforget to consider different document and canvas contexts, and feel free toexpress yourself using React with the most popular WebGL-based library!

Same API, but they are not inter-connected I'd say.

Share:
Andrei is a skilled frontend developer from Moldova with expertise in React, JS, TypeScript, and a wide range of other front-end tools. He's dedicated to crafting top-notch web applications and user interfaces, and when he's not honing his coding skills, he can be found delving into his interests in sports, literature, fine arts, and a good glass of wine.

Other articles by same author

Article collaborators

SABO Newsletter icon

SABO NEWSLETTER

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

About SABO Mobile IT

We focus on developing specialized software for our customers in the automotive, supplier, medical and high-tech industries in Germany and other European countries. We connect systems, data and users and generate added value for our customers with products that are intuitive to use.
Learn more about sabo