(WIP) Animation support.

index.html

@@ -55,7 +55,7 @@
       <example-snippet stamp-to="demo-container" highlight-as="html">
           <template>
               <model-viewer
-                src="examples/assets/Astronaut.glb"
+                src="examples/assets/Horse.glb"
                 alt="A 3D model of an astronaut"
                 controls
                 auto-rotate

src/three-components/CachingGLTFLoader.js

@@ -39,6 +39,8 @@ export class CachingGLTFLoader {
 
     const model = gltf.scene ? gltf.scene.clone(true) : null;
 
+    model.userData.animations = gltf.animations; // save animations
+
     // Materials aren't cloned when cloning meshes; geometry
     // and materials are copied by reference. This is necessary
     // for the same model to be used twice with different

src/three-components/Model.js

@@ -13,10 +13,22 @@
  * limitations under the License.
  */
 
-import {Box3, Object3D, Vector3} from 'three';
+import {AnimationMixer, Box3, Object3D, SkinnedMesh, Vector3} from 'three';
 
 import {CachingGLTFLoader} from './CachingGLTFLoader.js';
 
+// TODO three.js doesn't clone SkinnedMesh properly
+SkinnedMesh.prototype.clone = function () {
+
+	var clone = new this.constructor( this.geometry, this.material ).copy( this );
+	clone.skeleton = this.skeleton;
+	clone.bindMatrix.copy( this.bindMatrix );
+	clone.bindMatrixInverse.getInverse( this.bindMatrix );
+
+	return clone;
+
+};
+
 /**
  * An Object3D that can swap out its underlying
  * model.
@@ -31,6 +43,7 @@ export default class Model extends Object3D {
     super();
     this.name = 'Model';
     this.loader = new CachingGLTFLoader();
+    this.mixer = new AnimationMixer();
     this.modelContainer = new Object3D();
     this.modelContainer.name = 'ModelContainer';
     this.boundingBox = new Box3();
@@ -95,6 +108,12 @@ export default class Model extends Object3D {
       }
     });
 
+    const animations = scene.userData.animations;
+
+    if (animations && animations.length > 0) {
+      this.mixer.clipAction(animations[0], this).play();
+    }
+
     this.updateBoundingBox();
 
     this.dispatchEvent({type: 'model-load'});
@@ -106,6 +125,7 @@ export default class Model extends Object3D {
     while (this.modelContainer.children.length) {
       this.modelContainer.remove(this.modelContainer.children[0]);
     }
+    this.mixer.stopAllAction(); // TODO Cleanup memory
   }
 
   updateBoundingBox() {

src/three-components/Renderer.js

@@ -183,6 +183,8 @@ export default class Renderer extends EventDispatcher {
         this.setRendererSize(maxWidth, maxHeight, false);
       }
 
+      scene.children[0].children[0].mixer.update(delta/1000);
+
       // Need to set the render target in order to prevent
       // clearing the depth from a different buffer -- possibly
       // from something in