Use your mouse or touch screen to interact
This is my second post in my series of tiny projects. I’ve been studying geometry, graphics, and the mathematics behind all of that. I previously wrote a little about P5 with React and this time I’m experimenting with React Three Fiber (R3F for short). I have projects in mind for both libraries.
R3F brings Three to React:
Build your scene declaratively with re-usable, self-contained components that react to state, are readily interactive and can participate in React’s ecosystem.
This is the first time I’ve used Three and, by extension, WebGL. I wanted to create something simple that builds on my existing knowledge but applied to a 3D environment.
- Display some very simple geometry (cubes)
- Rotate geometry smoothly
- Interact with mouse and touch gestures
Firstly I needed to create a type to represent a single cube:
This is a very simplistic idea a cube, I just needed three properties for this learning project. The position is totally random and will sometimes overlap other cubes. Solving that is a topic for another time. The rotation speed (the X and Y coordinates being updated over time) is also randomly set.
The cube is updated every frame to create the rotation effect.
The previous two blocks mostly concerned themselves with the particulars of representing and updating cubes. Following this I have a component which renders a single cube.
Now all of the building blocks (or maybe, building cubes?) are in place I need to render them. This code again highlighting the benefits of using a declarative framework like React with a graphics library like Three.
This was a lot of fun to create and I’m excited to see what I make next!