Object4D - Adding native animation to THREE.js

Tuesday, December 17, 2013 Posted by Josh Staples
In some of my development, I've had to figure out a way to animate a number of different kind of objects synchronously between geospatial locations.  Additionally, I have to sometimes stop, redirect or delete a mesh.

In other words, PubSub animation for THREE.js.

DEMO of Object4D

GitHub Code

Initially I tried TWEEN.js but quickly found that it didn't provide the kind of micro-control I needed in my objects.  In lieu of TWEEN.js, I ended up creating a dozen or so animation objects for each kind of mesh I had to animate.   After creating these classes, I quickly realized they were all essentially the same and I could easily extend the THREE.Object3D class and create a new one called Object4D.

Here is what Object4D looks like:


After creating an Object4D object, I also created a manager for the animated objects.  The manager passes a clock delta to each object between frame renders.   Each Object4D element updates it's own position based upon the latter clock delta, it's speed, movement vector and target location.   In essence, these objects are self-tweening.   Unlike many tweening approaches, you can easily stop or interrupt the animation and even re-direct the target movement mid-tween.   The demo above demonstrates this behaviour.  Here is a Gist of the manager class:

In short, it works great for my purposes and I think it is pretty clever to extend the base Object3D class.   Additionally, it makes it really easy to extend the animation functionality just by modifying the base Object4D class.