My foray into 3D animation with JavaScript

Linda Okorie
4 min readMar 30, 2019

So i decided to beef up my meagre skills in coding by taking on a project that would not only push me to learn things but stand as evidence in the future to what I can do. At the advice of brother, i chose a project that would clearly show my knowledge in an area of my choice — not too big and not too small. My choice; a 3D Multiplayer dice roller. Typical,right? There must be hundreds of people before me who have all embarked on the same project — a visit to Google Play store will attest to that. Well thinking about it, it seemed like a big task to me and that’s all that matters. Baby steps, ok? Baby steps.

The first problem i encountered presented itself the very moment i decided on the project — How on earth was i supposed to build something like that?! I knew one thing though, that no matter the method i chose i would use the Nodejs environment because i wanted to get used to it. So to start, i did research on graphics and physics engines in to make a choice on the ones i would like to use. I settled on Three.js and Cannon.js. Reading through their documentation was an absolute nightmare! So bulky (I must say though that i have never had the flair for it, i prefer already digested info regurgitated for me to take in). I found there were very few tutorials out there on the subject and the few tutorials that were free were inconclusive. On a daily basis, i try to avoid YouTube videos — they are bloodsucking demons sent to eat up our data! I’m on a tight budget (can’t be wasting data anyhow when i haven’t seen the money to buy more data next month). Finally though, i caved in and downloaded ONE video. After learning and successfully writing the code that would create two dice and make the roll naturally, i pushed my code to BitBucket feeling like a star and waited for an appraisal from my brother who is my long-distance guide in software development.

Next thing i know, BAM! His appraisal destroyed my code and turned it into a pile of rubbish. I had to start from scratch but with a bit of a guideline he gave me. I don’t know how but it seems i processed the guideline wrong because the second attempt was worse than the first (At least from his reaction. The thing pained me i will not lie). Back to square one!

At his advice, i paused coding, downloaded the book ‘Clean Code’ and read it. It took just the first two chapters for the scales to fall from my eyes (he said it would happen that way) and it dawned on me just how important the things he was hammering on were in the greater scheme of things. I finally understood, it’s not just about what you are trying to achieve but about how you go about it. It isn’t about the destination alone but the journey as well. Don’t worry, I’m still talking about software development. Although the same still applies to life in general, business and practically any other field you can think of.

Reading that book as well as some others prescribed by my brother and some i stumbled on has helped me to become a little more patient and a little more meticulous in things — remembering the greater benefit ahead and not the pain of today. I don’t just shout ‘it works!’ but also ask afterwards ‘why does it work this way?’. I am not done making the application yet though, right now i am battling the world of Unit testing, TDD and BDD while still reading more on how to write clean code and practicing Data Structures and Algorithms. I have resolved two things,one — if i learn the right thing the first time, every obstacle i cross will remain behind me; two — i will write a comprehensive tutorial on Three.js and Cannon.js for people like me that are looking for already digested info at the cheapest rate possible. Affliction shall not rise the second time!

--

--