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:
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:
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:
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!