The JavaScript program below demonstrates so-called "skeletal" or "skin-and-bones" animation of a three-dimensional mesh. To see the source code, or to make a comment, visit https://thiscouldbebetter.wordpress.com/2014/06/23/a-skeletal-animation-framework-in-javascript/.

The code works by keeping "at rest" and "posed" versions of both the skeleton and the mesh it's meant to control. Certain bones in the skeleton are assigned to certain vertices in the mesh. To determine where the "posed" version of a particular vertex ought to be, the code first determines where the corresponding "at rest" vertex lies along the orientation axes of the controlling "at rest" bone, taking the root of that bone as the origin. It then multiplies this value along the "posed" bone's orientation, and adds the position of the bone's "posed" root.

Yeah, I know, it's complicated.

I'd eventually like to enhance this by allowing multiple bones to control a single vertex (each contributing some fraction of the total displacment of the posed vertex), making a better-looking mesh for the skin, finding a way to "merge" together duplicate vertices in the skin mesh to make it one continuous piece rather than a bunch of disconnected segments, and providing a way to import the skin, bones, and possibly even an animation or animations.