Easy-To-Follow Tutorials

Make your React websites fun by adding interactive 3D objects

A simple tutorial on using React-Three-Fiber with React.

Photo by Pineapple Supply Co. on Unsplash

I love fun websites. ʕ•́ᴥ•̀ʔっ♡

When there are some cool effects that add in some element of surprise and interactivity, I always get a little surge of delight when I scroll through it.

Even though vanilla CSS and JavaScript can go a looong way towards creating awesome experiences for your users (see link), today we’re going to be looking at how we can render 3D objects in your browser with React-Three-Fiber.

Here’s the end product:

Screencast by Author

In today’s tutorial, we’re going to go through how to render a glTF and a GLB object (they’re slightly different) in your React app. Some of the differences between a glTF file and a GLB file are:

+---------------------------------+--------------------------------+
|              glTF               |              GLB               |
+---------------------------------+--------------------------------+
| JSON based file                 | Binary format…