Three.js Mesh Animation
This mesh-animation demo uses an object of type THREE.AnimationMixer to animate models of a running horse and a flying stork.
The models are in the JSON format used by three.js and are part of the three.js download (version 89). Each of the two model files includes a set of "morph targets." A morph target is an alternate set of vertices for the mesh geomety of the model. The morph targets describe the geometry of the model at different points in time. Those points in time are "key frames" for the animation; that is, the geometry for points between the key frames is obtained by interpolating the vertex positions from their values at the key frames. A THREE.AnimationMixer is used to apply the interpolation to the mesh object. (This "mixer" works with a THREE.AnimationClip and a THREE.AniamtionAction in a rather complex animation system. See the source code.) The colors for the horse and for the stork are part of the models.
The techniques for this demo are based on the sample program canvas_morphtargets_horse.html, which is part of the download of three.js from its web site, threejs.org. You can look at the source code of this demo or of that sample program to see how the animation is programmed.
You can use your mouse to rotate the model, even when it is animating.
