We just launched our first WebGL project this week after a couple of months of work.
Our last 3D project dated back from 2009 where Flash and Papervision were still king for this sort of work.
Obvisouly things have changed since then and Three.js has largely dominated the 3D world on the web thanks to the work of Ricardo Cabello and the numerous contributors to the library.
Getting back in the 3D game in itself wasn’t as hard as I had expected, but I still struggled with basic mathematics concepts such quaternions and matrixes. Through tutorials, examples and a lot of trial and error I managed to get things done but I’d like to be able to grasp the meaning of certain more advanced math concepts. Thankfully, I recently found the “Coding Math” YouTube channel which looks like exactly what I need right now.
One thing we tried on this project is writing all code in ES6 from the beginning. I was pleasantly surprised with the support ES6 has on most recent browsers. Even iOS 10 runs it natively now. We’ll probably start using ES6 exclusively somewhere in the next year. There’s no reason not using it when Babel is so easy so setup for transcoding to ES5.
ES6 gave us the ability to easily and cleanly extend Three.js classes with our own set of instructions which was a crucial part of this project. For example, each character in the chain is an Object3D object and inherits all of its methods and properties while adding new ones, such as mouse interactions and animations.
Writing ES6 for this project felt alot like writing Actionscript 3 from my days with Flash (minus the strict typing and access modifiers). I don’t miss the Flash plugin one bit, but I do appreciate good scripting languages, and AS3 was certainly one of them. I’m hoping ES7/ES2016/ES* will elevate itself to that level one day.