(Note: This is the first lesson, but it assumes a basic understanding of both React and 3D. I plan to add introductory lessons to these topics, as well as a background to WebGL and Three.js.)
React-Three-Fiber (short: #R3F) is what you use to show 3D in React.
In my examples I have a root/top class called Scene, but this could be called whatever. What you do need however in a basic scene, is:
- Canvas, in which everything else exists
- a 3D object – a mesh that has a material
- some light
Canvas
The Canvas wraps everything else, and also has camera controls (position and field-of-view, FOV).
The 3D object (the cube)
The 3D object consists of a mesh container that wraps the cube object (boxGeometry) and a material (meshStandardMaterial).
Lights
I have two lights in this scene:
- ambientLight: background light. You can remove this, but it will make the scene darker.
- a pointLight: like a lightbulb. If you remove this, the entire scene will look flat.