Low-Hanging 3D Web Fruit: A Spinner

When you sign up to the bearjam.dev newsletter, you will see a 3D loading spinner. Here it is in isolation:

We needed something to indicate the loading state during subscription, and I was also keen to get my feet wet in the 3D web space, so... two birds one stone.

Looking at the react-three-fiber (R3F) demos and how little code is needed to spin a box, it seems the ideal entry-level 3D project (especially suiting our isometric cube logo!)

However, R3F is difficult to grok without having coded with Three.js, therefore I recommend starting out with some plain Three.js code before moving to R3F. This helps with understanding the underlying API.

Here are the resources that got me going with Three.js and R3F.

• Three.js Fundamentals, especially:
  • Basics
  • Cameras
• Three.js helpers and controls

• Bringing WebGL to React, a presentation by Paul Henschel
• The R3F GitHub repository is full of documentation and examples.

The thing to understand about R3F is that it's a react reconciler (again, see Henschel's conference talk). This means it transforms JSX code to Three.js API calls. The available mappings can be seen in these type declarations.

If you run Lighthouse before and after including R3F in your code, you'll notice a big performance hit (due to size of Three.js). This can be overcome with lazy loading, which can be implemented in a variety of ways.

In our case, it made sense to use a combination of dynamic imports and the Intersection Observer API.

There are some nice wrapper libaries such as @loadable/component and react-intersection-observer.

Here is a CodeSandbox with lazy loading implemented:

(Next.js ships its own dynamic import library, so we use that instead of @loadable/component for this demo. The API is practically the same in either case.)

If you have any questions or ideas, drop me a line at tom@bearjam.dev.