(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.)
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
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).
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.