Setting up a basic ThreeJS scene (React Three Fiber/NodeJS)
The very first hurdle you need to clear when setting up a ThreeJS scene is to learn about the basic building blocks. Once we learn these we can begin to explore the fascinating world of real-time WebGL rendering!
To start we will go through the various basic building blocks of ThreeJS which are as follows:
- Scene: The scene is a container that holds all the objects in your 3D world, including cameras, lights and meshes.
- Camera: Cameras allow you to view your 3D world from different perspectives by changing their position and orientation in the scene.
- Renderer: The renderer takes care of drawing all the objects on the screen using WebGL or Canvas APIs depending on what’s available on your device/browser combination.
- Lights: Lights are used to illuminate scenes; there are several types of lights available such as ambient light, directional light, point light and spotlights which can be added to a scene for better realism when rendering it out with shadows enabled if desired.
- Materials & Shaders: Materials define how an object looks like when rendered; they provide properties such as colour, shininess or texture maps while shaders define how those materials should be applied onto geometry surfaces during rendering time (e.g.: Phong shading).
- Mesh Objects & Geometry Classes: Mesh objects represent actual 3D models loaded into memory either from external sources (e..g GLTF/FBX files) or procedurally generated using classes like BoxGeometry, SphereGeometry, etc.
Here is a basic Codepen ThreeJS R3F scene:
https://codesandbox.io/s/heuristic-cori-xthwmq?file=/src/App.js
In the next article, we will look at animating a 3D avatar and adding it to our scene! Stay tuned….
