Canvas
After looking at SVG’s I became a bit more interested in CSS. When you think about all the gears that turn to make a simple app, you understand that programming is beautiful. When you start learning CSS, you understand how hard it is to make something look beautiful. As I’m slowly getting around to making that game, I wanted to know about 3-D models.
I found there was a react technology for rendering 3-d models. React Three Fiber seems to make use of hooks so that already tells me it expects to make something dynamic. When I started looking at the first example it wasn’t looking as clear as I hoped. I was too focused on the tags I haven’t seen before instead of paying attention to what I did know. I can read the hooks and the ternaries and that tells me a lot of what I need to know. I decided it might make life easier if I learned about the one called Canvas.
It wasn’t my first time hearing of canvas. I roughly knew it was a tool to draw. So far what I have learned about Canvas, is how to make 2-d shapes. I noticed that the mesh made the 3-D shapes, while the canvas element looked like a container of sorts that added to the shapes by giving shadows. So my preliminary experience leads me to believe the react Canvas and the regular Canvas aren’t too different. Also I should probably work my way up to 3-D anyways.
The beautiful examples I saw on the react-three-fiber website, made me feel like I definitely want to master this, I don’t think there are any shortcuts to mastery. I looked at some examples on the Canvas Api, and tried to make something my own. Tried to make a battle-ax, not sure why, don’t look too much into it. Just like with SVG’s it took some playing with to grasp what the numbers do in the path. Also like SVG’s I’m looking forward to the day when something that looks amazing in my mind is actually represented on the screen.
Goal
Resources