https://visualise.com/virtual-reality/virtual-reality-healthcare" target="_blank" rel="noreferrer noopener">healthcare training, create new experiences for people with mobility issues, or even aid in aerospace engineering.

Especially relevant today, AR streaming experiences are emerging on the entertainment scene, with DJ Dixon live streaming an AR experience for those of us at home in isolation!

https://www.youtube.com/watch?v=zMG7K5_Jv2M&feature=emb_title

Then there are the websites that allow shoppers to customise their products, often using libraries like Threejs. The list of uses is endless. It was this endless list of impacts that inspired me to learn Threejs in the first place. And in doing so, I stumbled across a few other libraries, with the most notable being one called ‘R3F’. That’s what I want to introduce in this post — in short though, you can look at it as “React meets Three.js”.

A World With 3D

First though, a bit more of how I’ve got into 3D programming:

I have always loved looking at objects from different perspectives. When I was a little girl, my mum used to tell me tales about tiny fairy communities living all around my garden. I would look at miniature models and picture the fairies using these small objects in their daily lives.

Since then, I have been in awe at 3D models that allow us to see objects from angles we do not usually see them in. We can pick up objects that are usually too large for us to lift and inspect them from a new perspective. When I began learning to code, I came across the Threejs library and the same feeling I had as a little girl was reignited inside of me. I knew from that moment that I wanted to create 3D experiences for users in a 2D environment.

Letter

An AI-assisted newsletter builder for content creators, designers, and developers.

This article is supported by Letter.

Interactive Experiences

If you get the same feelings as I do from 3D creative code, you’ll have a field day with a few of my favourite examples.

Over the last year, I have been exploring 3D programming libraries, like ThreeJS. Staying true to my music, I encapsulated the audio data of one of my favourite tracks, Hot Summer Nights by Love Club using ThreeJS. It’s a real diamond of a song.

Naturally, I wanted to use ThreeJS in a React app. Enter React-Three-Fiber.

What is R3F (React-three-fiber)?

React-three-fiber (commonly referred to as R3F) is a reconciler for Threejs. Anything you can do with ThreeJS, you can do in R3F. This was great news because I knew the world needed more disco balls visualising audio data!

R3F takes care of all the tedious stuff when it comes to ThreeJS. You no longer have to worry about the Canvas or start the render loop. It also makes creating objects a million times easier. The website goes into it a bit deeper.

Getting Started With R3F

The best starting point is to have a basic understanding of ThreeJS. It won’t take long to learn the basics.

Once you have the basics down of ThreeJS, it’s time to get started with R3F. I would recommend this tutorial. There aren’t many R3F tutorials online which can be frustrating in the beginning but there are ways around this. The best way I have found is recreating basic Threejs examples in R3F to get to grips. You of course, always have the documentation.

There is also a very active community on Spectrum. You can join this here.

The R3F Spectrum group has been a lifeline for me. Paul Henschel, the creator of R3F, regularly responds to questions. It was easy to find the answers to questions by searching through the posts.

Paul posts often on Codesandbox. His sandboxes can help when you are trying to figure out how to implement simple elements in your code. His Twitter is also a great resource, he posts what he has recently been working on using R3F.

Some Last Words…

At the beginning of any journey, it is hard to predict the paths may lead down. Maybe today you will begin with learning a new 3D programming library. Maybe tomorrow, you will be creating the next 3D educational resource that helps doctors and engineers or you will enhance our entertainment experience with an entirely new 3D world. Until then, it always starts with today.

Catch me on social

Twitter Instagram

Enter the 3D Coding World: React + ThreeJS = R3F