How Do I Use It?

Simply use the Canvas component to create a three-js canvas — this will take the whole height and width of its container.

Then, within the Canvas node, you’ll be able to add all your dynamic components — like your nested hierarchy of react components as well as custom ones. In this case, we created a Box component with some custom behaviors.

We used useRef to access the mesh of the cube . After it’s initialized by three-js , inside, canvas is able to keep a connection to it, altering scale or changing direction when hovered over with mouse or touch.

If you scroll down and take a look at the Canvas you will see other official components from three-js , such as ambientLight and pointLight .

<Canvas> <ambientLight /> <pointLight position={[10, 10, 10]} /> <Box position={[-1.2, 0, 0]} /> <Box position={[1.2, 0, 0]} /> </Canvas>

To sum up, you will need to use just these functions/hooks from Fiber if you want to start using this great library to add more 3D:

import { Canvas, useFrame } from 'react-three-fiber'

If you enjoy your experience with this library I suggest you to start looking at a more grounded introduction to the three-js and WebGL world here: https://threejsfundamentals.org/.

If then you feel you’d like to explore more of the capabilities of fiber, you can read more in the official documentation.