I have to confess that I have always been fascinated by animations, especially 3D graphics. Maybe the complexity of the tools at the time kept me somewhat away.
Fortunately, all this has been changing. WebGL, among other technologies, has been making way for this interesting world, and the best part of it, it is in the web browser.
For my first steps in this experience, I chose the following technologies:
- Three.js for everything related to 3D graphics since it is sufficiently documented and has very useful examples for references.
- React.js, it is my favorite development library. I like the order that you can maintain in a project following an ecosystem of components and React stands out very well achieving this. However, other JS technologies should work without further problems.
- React-three-fiber, It will save us a lot of time for our Scene creations, some hooks integrations, etc.
- React-spring, to smooth out animations (scaling, colorization changes, etc.)
- Gatsby.js, Empty React project boilerplate.
My goal for this mini-project was to achieve the interaction of a React.js component with some 3D Objects generated with Three.js; encapsulated in reusable components. I was beyond satisfied by the results.
Three + React - Testing Component state
These are the more important entities in Three.js:
- Renderer: Like the drawer(WebGL, etc)
- Camera: To control perspective aspects
- Scene: The space or universe where objects are created
- Meshes: They are our Objects constituted by Geometries and Materials
- Geometries: Vectors / Triangles that define the object (shape)
- Materials: What Geometry looks like when drawn (texture, color)
- Lights: Lights that act on our objects. Also capable of casting shadows
If you think about it, entities are very attached to our reality, which is great since gives you a perception of familiarity to the world that we are about to explore.
Since we initially have an empty space (scene), let's start with a simple element: a cube.
NOTE: Complete source available at the end of the post.
Great! We already have our reusable Box component. In the code above, my intention is to show how to generate a basic 3D Object (Mesh) generated by a reusable component. Note that this object has both Geometry and Material (In the documentation you will surely find more options for both).
Now, all we need to do is render it and for this, a normal scenario for Three.js would be to define the other entities: Renderer, Camera, Scene. But fortunately, React-three-fiber provides us with a Canvas component that already creates these entities with default values.
And just like that this all we need to render our Box component into our main component!
3D Cube Testing
Obviously there are complex properties you can use to make complex calculations and achieve different results in your Objects.
The following source code is the complete use case of the mini-project experience I was working on for this proof of concept. This is what it does:
- Renders seven cubes rotating with some images textures attached to them. The useFrame() hook handles the frame by frame rotation.
- You can click on a cube and this will change its component state (active). This modifies the rotation speed and scale of the cube.
- Hover in and out will highlight the cube
- The main component handles the cube selection
- A plain JS React component handles the list of the selected cubes
I had a blast messing around with 3d graphics, I loved it! I like the power of abstraction that Three.js provides us and the possibilities to connect all this with the technologies we love. There are so many components to play around with, there is also VR support! I am definitely trying that as well. I hope you enjoyed the content of this post and that it makes you want to give it a try. Once you start creating 3D scenes you just don’t want to stop... Happy Coding!