In this article, I will be sharing my experience of facing bugs and debugging them while I was working with TweenJs and ThreeJS. This will be my blog for the #DebuggingFeb writeathon.
Whether one is a seasoned pro developer or a budding newbie like me or even the one in the intermediate phase, the one thing which seems to be inevitable(not like Thanos) for us is BUGS. Whether we work on someone else's projects or make one of our own, facing Bugs seems to be the only constant in the world of development. Such was a Bug which I faced when I was trying to integrate TweenJS with my ThreeJS project.
This week while I was working on a Threejs project, I had to add an animation using TweenJS to my FBX model, I had made the animation but with Tween, the animation can be made smooth and reloading of the animation model can be prevented. So I started to learn how to add it to my animation as I had never used it before. Following the documentation, i imported the Tween from ThreeJS library, added the tween function to my animate() function which renders the model and made two functions with Tween to open and close the drawer for the Table but when i ran the application, no animation was working and when i checked the console for errors there were a dozen errors which i didn't even understood.
So at first I started to debug the errors which were displayed in my console as much as i understood them but it was of no use. Slowly and steadily i was starting to get frustated. I watched a lot of tutorials, read a lot of documentation about how to add tween for animation and i could not see anything which i was doing wrong violating the syntax.
I even changed the loader by which i was loading my model and tried many different ways to load because i thought that must be the issue but the result was still the same. So i became more and more frustated, and started trying random things which didn't even make sense for the model. Eventually when i was tired and was thinking to leave it for some time, i thought that i should check what all functions and attributes does Tween contain.
So I console.logged(TWEEN), and to my suprise I found the mistake which I was making and was not even mentioned in the documentations. To use Tween, we have to make a new Tween, and i was doing it like TWEEN.tween() but it had to be TWEEN.Tween(). A simple mistake of case sensitivity, thats all it was and this simple bug kept me frustated for such long hours. But when i eventually resolved it , the feeling was surreal. As all developers can relate, the sleep you get after resolving a long and tiring bug cannot be expressed in words.
That was my small experience with debugging, share yours too and like if you enjoyed this article of mine.