Introduction to WebGL & Three.js

WebGL is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. It is incredibly powerful but notoriously difficult to write from scratch.

Three.js is a library that wraps WebGL into a much simpler API. Instead of writing raw shaders to draw a triangle, Three.js lets you say new THREE.BoxGeometry() and handles all the complex math behind the scenes.

React Three Fiber (R3F) goes a step further. It is a React renderer for Three.js. It allows you to build 3D scenes declaratively using components, managing state, hooks, and lifecycle events seamlessly.