Table of Contents
Three JS
In this image, the renderer is a Scene which defines the background and contains all of the other objects. There can be multiple Mesh objects, which specify the Geometry of an object with a Material to define the color. Light is necessary to give your objects color, otherwise they are void of light, or black. Texture is unsurprisingly used to render texture on objects in your screen. Another object that is needed is the Camera to be able to move the view around. We are going to be using React Three Fiber Canvas element which includes the camera.
React Three Fiber
React Three Fiber is a renderer built on top of Threejs. It provides a component-based Scene element with built-in helpers and hooks for an easier starting point than jumping into all of the Threejs library. Let's get a create-react-app up and running and install the package.
npx create-react-app react-3d
cd react-3d
npm install three react-three-fiber