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