Delving into the World of 3D Web: From WebGL to ThreeJs and React Three Fiber

Have you came across some interesting websites like this famous one https://bruno-simon.com/ and wondered how all this is achieved in a web browser since creating these complex animations isn't possible with just HTML and CSS. Well, the magic lies in WebGL, a Javascript API to render high-performant 2d and 3d elements. WebGL leverages the hardware GPUs and hence can render the high interactive elements.
While WebGL offers all such advantages, it is still a very low-level API, and creating things out of it requires quite a bit of code. This is where ThreeJs steps in

ThreeJs

ThreeJs is an open-source library that uses WebGL renderer and provides a more declarative and a lot easier way to create and render 2d and 3d graphics and animation on the web browser.

The official documentation offers a comprehensive deep dive into ThreeJS. Let's quickly go through the main objects of it:

• Renderer - This is the main object that renders the objects that are part of the area covered by the camera, it can be your webGL renderer
• Scene - This consists of all your various objects, like light, camera, geometries, meshes. These all things are arranged in scenes in a parent-child tree structure and are referred to as scenegraph
• Geometry - This is an object consisting of the vertex of the shapes like sphere, cube etc.
• Material - While geometry represents the vertices the material represents the surface properties of our shapes, for eg: the color of the surfaces, the transparency, reflection properties, etc:
• Mesh- A mesh combines a geometry and a material, giving your object a visible representation. You can have multiple meshes with the same geometry and material to create identical objects in different locations.
• Texture - These represents loaded images that can be used by our materials over which we can wrap these images.
• Light - Lights objects illuminate your scene and create a sense of depth and dimension. Various types of lights exist, such as point lights, ambient lights, and directional lights.

React Three Fiber

React Three Fiber acts as a bridge between the powerful capabilities of Three.js and the declarative nature of React development. It streamlines the process of creating and manipulating 3D scenes within your React applications.

Here's how with normal three js we will need to do the following things to create a scene. Render a canvas element get its reference, create renderer, camera, and scene objects, define our geometry material and mesh then add all of them to the scene object.

const canvas = document.querySelector('#c');
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height)
document.querySelector('#canvas-container').appendChild(renderer.domElement)

const mesh = new THREE.Mesh()
mesh.geometry = new THREE.BoxGeometry()
mesh.material = new THREE.MeshStandardMaterial()

scene.add(mesh)

function animate() {
  requestAnimationFrame(animate)
  renderer.render(scene, camera)
}

animate()

whereas with react three fiber it is as simple as

import { Canvas} from "@react-three/fiber";

<Canvas>
 <mesh>
    <boxGeometry />
    <meshBasicMaterial />
  </mesh>
</Canvas>

Next Step: Let's learn to write our hello world code with react three fiber