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: 


  1. Scene: The scene is a container that holds all the objects in your 3D world, including cameras, lights and meshes. 


  1. Camera: Cameras allow you to view your 3D world from different perspectives by changing their position and orientation in the scene. 


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


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


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


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


In the next article, we will look at animating a 3D avatar and adding it to our scene! Stay tuned….

Setting up a Basic ThreeJS scene