Learn by doing - React three fiber

In the last blog, Learn-by-doing: React-three-fiber ep. 1, we started by just getting a little familiar with the API and fundamentals of Three.js. In this episode (?), I'd like to do something a little more exciting or flashy. This is a three demential library so we should do something 3D!

I'll start with where we left off last time, a very simple example of text:

For this episode, I think I'll try to add some depth to the text and make it follow the mouse. We should also add some state! We are using React so it would only be appropriate. I'm thinking I'll make it change colors when we click on it. Or wobble or something. I'm just spitballing but I'll let the examples guide me.

To streamline the discovery process, I'll create a task list:

• Make the word change direction on hover
• Add some 3 dimensional depth to the word
• Add some color to the word
• Make the word wobble (or something, tbd) on click

Looking at the examples, it appears this one follows the mouse in a way I can try to replicate:

https://codesandbox.io/embed/r3f-sparks-sbf2i

In the example, it appears the position of the text is changed with in this useFrame function call. Looking through the react-three-fiber docs, there isn't really an explanation or a one to one comparison in the Three.js docs, I'll assume it's a kind of game loop.