Hack to clip animation time so looping looks right

examples/js/loaders/gltf/glTFAnimation.js

@@ -119,19 +119,23 @@ THREE.glTFInterpolator = function(param)
 	this.isRot = false;
 	
 	var node = param.target;
+	node.updateMatrix();
 	node.matrixAutoUpdate = true;
 	this.targetNode = node;
 	
 	switch (param.path) {
 		case "translation" :
 			this.target = node.position;
+			this.originalValue = node.position.clone();
 			break;
 		case "rotation" :
 			this.target = node.quaternion;
+			this.originalValue = node.quaternion.clone();
 			this.isRot = true;
 			break;
 		case "scale" :
 			this.target = node.scale;
+			this.originalValue = node.scale.clone();
 			break;
 	}
 	
@@ -161,23 +165,23 @@ THREE.glTFInterpolator.prototype.interp = function(t)
 	else if (t < this.keys[0])
 	{
 		if (this.isRot) {
-			this.quat1.set(this.values[0],
+			this.quat1.set(this.originalValue.x,
+					this.originalValue.y,
+					this.originalValue.z,
+					this.originalValue.w);
+			this.quat2.set(this.values[0],
 					this.values[1],
 					this.values[2],
 					this.values[3]);
-			this.quat2.set(this.values[4],
-					this.values[5],
-					this.values[6],
-					this.values[7]);
 			THREE.Quaternion.slerp(this.quat1, this.quat2, this.quat3, t / this.keys[0]);
 		}
 		else {
-			this.vec3.set(this.values[0],
+			this.vec3.set(this.originalValue.x,
+					this.originalValue.y,
+					this.originalValue.z);
+			this.vec2.set(this.values[0],
 					this.values[1],
 					this.values[2]);
-			this.vec2.set(this.values[3],
-					this.values[4],
-					this.values[5]);
 
 			this.vec3.lerp(this.vec2, t / this.keys[0]);
 		}

examples/webgl_loader_gltf.html

@@ -168,7 +168,7 @@
                 var spot1 = null;
                 if (sceneInfo.addLights) {
                     
-                    var ambient = new THREE.AmbientLight( 0x222222 );
+                    var ambient = new THREE.AmbientLight( 0x888888 );
                     scene.add( ambient );
 
                 	var directionalLight = new THREE.DirectionalLight( 0xdddddd );
@@ -302,6 +302,10 @@
 	    				for (i = 0; i < len; i++) {
 	    					var animation = gltf.animations[i];
 	    					animation.loop = true;
+	    					// There's .3333 seconds junk at the tail of the Monster animation that
+	    					// keeps it from looping cleanly. Clip it at 3 seconds
+	    					if (sceneInfo.animationTime)
+		    					animation.duration = sceneInfo.animationTime;
     						animation.play();
 	    				}
     				}
@@ -369,6 +373,7 @@
 			                 objectScale: new THREE.Vector3(0.01, 0.01, 0.01),
 			                 objectPosition: new THREE.Vector3(0, 1, 0),
 			                 objectRotation: new THREE.Euler(-Math.PI / 2, 0, -Math.PI / 2),
+			                 animationTime: 3,
 			                 addLights:true,
 			                 shadows:true,
 			                 addGround:true },
@@ -377,7 +382,7 @@
 		                 objectScale: new THREE.Vector3(0.1, 0.1, 0.1),
 		                 addLights:true,
 		                 addGround:true,
-		                 shadows:false },
+		                 shadows:true },
      			];
 
 			function buildSceneList()