Merge remote-tracking branch 'remotes/mrdoob/dev' into dev

Animation / skinning / path controller are now broken :/

examples/webgl_collada.html

@@ -31,13 +31,13 @@
 			var dae, skin;
 
 			var loader = new THREE.ColladaLoader();
+			loader.options.convertUpAxis = true;
 			loader.load( './models/monster.dae', function colladaReady( collada ) {
 
 				dae = collada.scene;
 				skin = collada.skins[ 0 ];
 
 				dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
-				dae.rotation.x = -Math.PI/2;
 				dae.updateMatrix();
 
 				init();

examples/webgl_geometries.html

@@ -27,7 +27,7 @@
 
 			var container, stats;
 
-			var camera, scene, group, renderer;
+			var camera, scene, renderer;
 
 			init();
 			animate();
@@ -55,29 +55,26 @@
 					new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true, transparent: true, opacity: 0.1 } )
 				];
 
-				group = new THREE.Object3D();
-				scene.add( group );
-
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ), materials );
 				object.position.set( -200, 0, 200 );
-				group.add( object );
+				scene.add( object );
 
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.CylinderGeometry( 25, 75, 100, 40, 5 ), materials );
 				object.position.set( 0, 0, 200 );
-				group.add( object );
+				scene.add( object );
 
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.IcosahedronGeometry( 2 ), materials );
 				object.position.set( 200, 0, 200 );
 				object.scale.x = object.scale.y = object.scale.z = 75;
-				group.add( object );
+				scene.add( object );
 
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.PlaneGeometry( 100, 100, 4, 4 ), materials );
 				object.position.set( -200, 0, 0 );
-				group.add( object );
+				scene.add( object );
 
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.SphereGeometry( 75, 20, 10 ), materials );
 				object.position.set( 0, 0, 0 );
-				group.add( object );
+				scene.add( object );
 
 				var points = [];
 
@@ -89,20 +86,20 @@
 
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.LatheGeometry( points, 20 ), materials );
 				object.position.set( 200, 0, 0 );
-				group.add( object );
+				scene.add( object );
 
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.TorusGeometry( 50, 20, 20, 20 ), materials );
 				object.position.set( -200, 0, -200 );
-				group.add( object );
+				scene.add( object );
 
 				object = THREE.SceneUtils.createMultiMaterialObject( new THREE.TorusKnotGeometry( 50, 10, 50, 20 ), materials );
 				object.position.set( 0, 0, -200 );
-				group.add( object );
+				scene.add( object );
 
 				object = new THREE.Axes();
 				object.position.set( 200, 0, -200 );
 				object.scale.x = object.scale.y = object.scale.z = 0.5;
-				group.add( object );
+				scene.add( object );
 
 				renderer = new THREE.WebGLRenderer();
 				renderer.setSize( window.innerWidth, window.innerHeight );
@@ -136,9 +133,9 @@
 
 				camera.lookAt( scene.position );
 
-				for ( var i = 0, l = group.children.length; i < l; i ++ ) {
+				for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
 
-					var object = group.children[ i ];
+					var object = scene.children[ i ];
 
 					object.rotation.x += 0.01;
 					object.rotation.y += 0.005;

examples/webgl_materials.html

@@ -64,11 +64,11 @@
 
 				// Materials
 
-				var generatedTexture = new THREE.Texture( generateTexture() );
-				generatedTexture.needsUpdate = true;
+				var texture = new THREE.Texture( generateTexture() );
+				texture.needsUpdate = true;
 
 				var materials = [];
-				materials.push( new THREE.MeshLambertMaterial( { map: generatedTexture } ) );
+				materials.push( new THREE.MeshLambertMaterial( { map: texture, transparent: true } ) );
 				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.FlatShading } ) );
 				materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.FlatShading } ) );
 				materials.push( new THREE.MeshNormalMaterial( ) );
@@ -76,12 +76,12 @@
 				//materials.push( new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ) );
 
 				materials.push( new THREE.MeshLambertMaterial( { color: 0xdddddd, shading: THREE.SmoothShading } ) );
-				materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, map: THREE.ImageUtils.loadTexture( "textures/planets/earth_specular_2048.jpg" ) } ) );
+				materials.push( new THREE.MeshPhongMaterial( { ambient: 0x030303, color: 0xdddddd, specular: 0x009900, shininess: 30, shading: THREE.SmoothShading, map: texture, transparent: true } ) );
 				materials.push( new THREE.MeshNormalMaterial( { shading: THREE.SmoothShading } ) );
 				materials.push( new THREE.MeshBasicMaterial( { color: 0xffaa00, wireframe: true } ) );
 
 				materials.push( new THREE.MeshDepthMaterial() );
-				materials.push( new THREE.MeshBasicMaterial( { map: generatedTexture } ) );
+				materials.push( new THREE.MeshBasicMaterial( { map: texture, transparent: true } ) );
 
 				// Spheres geometry
 
@@ -188,8 +188,10 @@
 					x = j % 256;
 					y = x == 0 ? y + 1 : y;
 
-					image.data[ i + 2 ] = Math.floor( x ^ y );
-					image.data[ i + 3 ] = 255;
+					image.data[ i ] = 255;
+					image.data[ i + 1 ] = 255;
+					image.data[ i + 2 ] = 255;
+					image.data[ i + 3 ] = Math.floor( x ^ y );
 
 				}
 

src/core/Matrix4.js

@@ -766,6 +766,185 @@ THREE.Matrix4.prototype = {
 
 		return this;
 
+	},
+
+	rotateByAxis: function ( axis, angle ) {
+
+  		// optimize by checking axis
+		if ( axis.x === 1 && axis.y === 0 && axis.z === 0 ) {
+
+			return this.rotateX( angle );
+
+		} else if ( axis.x === 0 && axis.y === 1 && axis.z === 0 ) {
+
+			return this.rotateY( angle );
+
+		} else if ( axis.x === 0 && axis.y === 0 && axis.z === 1 ) {
+
+			return this.rotateZ( angle );
+
+		}
+
+		var x = axis.x,
+			y = axis.y,
+			z = axis.z,
+			n = Math.sqrt(x * x + y * y + z * z);
+
+		x /= n;
+		y /= n;
+		z /= n;
+
+		var xx = x * x,
+			yy = y * y,
+			zz = z * z,
+			c = Math.cos(angle),
+			s = Math.sin(angle),
+			oneMinusCosine = 1 - c,
+			xy = x * y * oneMinusCosine,
+			xz = x * z * oneMinusCosine,
+			yz = y * z * oneMinusCosine,
+			xs = x * s,
+			ys = y * s,
+			zs = z * s,
+
+			r11 = xx + (1 - xx) * c,
+			r21 = xy + zs,
+			r31 = xz - ys,
+			r12 = xy - zs,
+			r22 = yy + (1 - yy) * c,
+			r32 = yz + xs,
+			r13 = xz + ys,
+			r23 = yz - xs,
+			r33 = zz + (1 - zz) * c,
+
+			m11 = this.n11,
+			m21 = this.n21,
+			m31 = this.n31,
+			m41 = this.n41,
+			m12 = this.n12,
+			m22 = this.n22,
+			m32 = this.n32,
+			m42 = this.n42,
+			m13 = this.n13,
+			m23 = this.n23,
+			m33 = this.n33,
+			m43 = this.n43,
+			m14 = this.n14,
+			m24 = this.n24,
+			m34 = this.n34,
+			m44 = this.n44;
+
+		this.n11 = r11 * m11 + r21 * m12 + r31 * m13;
+		this.n21 = r11 * m21 + r21 * m22 + r31 * m23;
+		this.n31 = r11 * m31 + r21 * m32 + r31 * m33;
+		this.n41 = r11 * m41 + r21 * m42 + r31 * m43;
+
+		this.n12 = r12 * m11 + r22 * m12 + r32 * m13;
+		this.n22 = r12 * m21 + r22 * m22 + r32 * m23;
+		this.n32 = r12 * m31 + r22 * m32 + r32 * m33;
+		this.n42 = r12 * m41 + r22 * m42 + r32 * m43;
+
+		this.n13 = r13 * m11 + r23 * m12 + r33 * m13;
+		this.n23 = r13 * m21 + r23 * m22 + r33 * m23;
+		this.n33 = r13 * m31 + r23 * m32 + r33 * m33;
+		this.n43 = r13 * m41 + r23 * m42 + r33 * m43;
+
+		return this;
+
+	},
+
+	rotateX: function ( angle ) {
+
+		var m12 = this.n12,
+			m22 = this.n22,
+			m32 = this.n32,
+			m42 = this.n42,
+			m13 = this.n13,
+			m23 = this.n23,
+			m33 = this.n33,
+			m43 = this.n43,
+			c = Math.cos(angle),
+			s = Math.sin(angle);
+
+		this.n12 = c * m12 + s * m13;
+		this.n22 = c * m22 + s * m23;
+		this.n32 = c * m32 + s * m33;
+		this.n42 = c * m42 + s * m43;
+
+		this.n13 = c * m13 - s * m12;
+		this.n23 = c * m23 - s * m22;
+		this.n33 = c * m33 - s * m32;
+		this.n43 = c * m43 - s * m42;
+
+		return this;
+
+  	},
+
+	rotateY: function ( angle ) {
+
+		var m11 = this.n11,
+			m21 = this.n21,
+			m31 = this.n31,
+			m41 = this.n41,
+			m13 = this.n13,
+			m23 = this.n23,
+			m33 = this.n33,
+			m43 = this.n43,
+			c = Math.cos(angle),
+			s = Math.sin(angle);
+
+		this.n11 = c * m11 - s * m13;
+		this.n21 = c * m21 - s * m23;
+		this.n31 = c * m31 - s * m33;
+		this.n41 = c * m41 - s * m43;
+
+		this.n13 = c * m13 + s * m11;
+		this.n23 = c * m23 + s * m21;
+		this.n33 = c * m33 + s * m31;
+		this.n43 = c * m43 + s * m41;
+
+		return this;
+
+	},
+
+	rotateZ: function ( angle ) {
+
+		var m11 = this.n11,
+			m21 = this.n21,
+			m31 = this.n31,
+			m41 = this.n41,
+			m12 = this.n12,
+			m22 = this.n22,
+			m32 = this.n32,
+			m42 = this.n42,
+			c = Math.cos(angle),
+			s = Math.sin(angle);
+
+		this.n11 = c * m11 + s * m12;
+		this.n21 = c * m21 + s * m22;
+		this.n31 = c * m31 + s * m32;
+		this.n41 = c * m41 + s * m42;
+
+		this.n12 = c * m12 - s * m11;
+		this.n22 = c * m22 - s * m21;
+		this.n32 = c * m32 - s * m31;
+		this.n42 = c * m42 - s * m41;
+
+		return this;
+
+	},
+
+	translate: function ( v ) {
+
+		var x = v.x, y = v.y, z = v.z;
+
+		this.n14 = this.n11 * x + this.n12 * y + this.n13 * z + this.n14;
+		this.n24 = this.n21 * x + this.n22 * y + this.n23 * z + this.n24;
+		this.n34 = this.n31 * x + this.n32 * y + this.n33 * z + this.n34;
+		this.n44 = this.n41 * x + this.n42 * y + this.n43 * z + this.n44;
+
+		return this;
+
 	}
 
 };
@@ -794,7 +973,7 @@ THREE.Matrix4.makeInvert3x3 = function ( m1 ) {
 
 	if ( det === 0 ) {
 
-		console.error( 'THREE.Matrix4.makeInvert3x3: Matrix not invertible.' );
+		return null;
 
 	}
 

src/extras/animation/Animation.js

@@ -10,7 +10,7 @@ THREE.Animation = function( root, data, interpolationType, JITCompile ) {
 	this.data = THREE.AnimationHandler.get( data );
 	this.hierarchy = THREE.AnimationHandler.parse( root );
 	this.currentTime = 0;
-	this.timeScale = 1;
+	this.timeScale = 0.001;
 	this.isPlaying = false;
 	this.isPaused = true;
 	this.loop = true;
@@ -20,6 +20,37 @@ THREE.Animation = function( root, data, interpolationType, JITCompile ) {
 	this.points = [];
 	this.target = new THREE.Vector3();
 
+	// initialize to first keyframes
+
+	for ( var h = 0, hl = this.hierarchy.length; h < hl; h++ ) {
+
+		var keys = this.data.hierarchy[h].keys,
+			sids = this.data.hierarchy[h].sids,
+			obj = this.hierarchy[h];
+
+		if ( keys.length ) {
+
+			for ( var s = 0; s < sids.length; s++ ) {
+
+				var sid = sids[ s ],
+					next = this.getNextKeyWith( sid, h, 0 );
+
+				if ( next ) {
+
+					next.apply( sid );
+
+				}
+
+			}
+
+			obj.matrixAutoUpdate = false;
+			this.data.hierarchy[h].node.updateMatrix();
+			obj.matrixWorldNeedsUpdate = true;
+
+		}
+
+	}
+
 };
 
 // Play
@@ -31,16 +62,21 @@ THREE.Animation.prototype.play = function( loop, startTimeMS ) {
 		this.isPlaying = true;
 		this.loop = loop !== undefined ? loop : true;
 		this.currentTime = startTimeMS !== undefined ? startTimeMS : 0;
+		this.startTimeMs = startTimeMS;
+		this.startTime = 10000000;
+		this.endTime = -this.startTime;
 
 
 		// reset key cache
 
 		var h, hl = this.hierarchy.length,
-			object;
+			object,
+			node;
 
 		for ( h = 0; h < hl; h++ ) {
 
 			object = this.hierarchy[ h ];
+			node = this.data.hierarchy[ h ];
 
 			if ( this.interpolationType !== THREE.AnimationHandler.CATMULLROM_FORWARD ) {
 
@@ -48,27 +84,26 @@ THREE.Animation.prototype.play = function( loop, startTimeMS ) {
 
 			}
 
-			object.matrixAutoUpdate = true;
-
-			if ( object.animationCache === undefined ) {
+			if ( node.animationCache === undefined ) {
 
-				object.animationCache = {};
-				object.animationCache.prevKey = { pos: 0, rot: 0, scl: 0 };
-				object.animationCache.nextKey = { pos: 0, rot: 0, scl: 0 };
-				object.animationCache.originalMatrix = object instanceof THREE.Bone ? object.skinMatrix : object.matrix;
+				node.animationCache = {};
+				node.animationCache.prevKey = null;
+				node.animationCache.nextKey = null;
+				node.animationCache.originalMatrix = object instanceof THREE.Bone ? object.skinMatrix : object.matrix;
 
 			}
 
-			var prevKey = object.animationCache.prevKey;
-			var nextKey = object.animationCache.nextKey;
+			var keys = this.data.hierarchy[h].keys;
+
+			if (keys.length) {
 
-			prevKey.pos = this.data.hierarchy[ h ].keys[ 0 ];
-			prevKey.rot = this.data.hierarchy[ h ].keys[ 0 ];
-			prevKey.scl = this.data.hierarchy[ h ].keys[ 0 ];
+				node.animationCache.prevKey = keys[ 0 ];
+				node.animationCache.nextKey = keys[ 1 ];
 
-			nextKey.pos = this.getNextKeyWith( "pos", h, 1 );
-			nextKey.rot = this.getNextKeyWith( "rot", h, 1 );
-			nextKey.scl = this.getNextKeyWith( "scl", h, 1 );
+				this.startTime = Math.min( keys[0].time, this.startTime );
+				this.endTime = Math.max( keys[keys.length - 1].time, this.endTime );
+
+			}
 
 		}
 
@@ -116,20 +151,25 @@ THREE.Animation.prototype.stop = function() {
 
 	for ( var h = 0; h < this.hierarchy.length; h++ ) {
 
-		if ( this.hierarchy[ h ].animationCache !== undefined ) {
+		var obj = this.hierarchy[ h ];
+
+		if ( obj.animationCache !== undefined ) {
 
-			if( this.hierarchy[ h ] instanceof THREE.Bone ) {
+			var original = obj.animationCache.originalMatrix;
 
-				this.hierarchy[ h ].skinMatrix = this.hierarchy[ h ].animationCache.originalMatrix;
+			if( obj instanceof THREE.Bone ) {
+
+				original.copy( obj.skinMatrix );
+				obj.skinMatrix = original;
 
 			} else {
 
-				this.hierarchy[ h ].matrix = this.hierarchy[ h ].animationCache.originalMatrix;
+				original.copy( obj.matrix );
+				obj.matrix = original;
 
 			}
 
-
-			delete this.hierarchy[ h ].animationCache;
+			delete obj.animationCache;
 
 		}
 
@@ -149,18 +189,13 @@ THREE.Animation.prototype.update = function( deltaTimeMS ) {
 
 	// vars
 
-	var types = [ "pos", "rot", "scl" ];
-	var type;
-	var scale;
-	var vector;
-	var prevXYZ, nextXYZ;
 	var prevKey, nextKey;
 	var object;
-	var animationCache;
+	var node;
 	var frame;
 	var JIThierarchy = this.data.JIT.hierarchy;
 	var currentTime, unloopedCurrentTime;
-	var currentPoint, forwardPoint, angle;
+	var looped;
 
 
 	// update
@@ -169,188 +204,155 @@ THREE.Animation.prototype.update = function( deltaTimeMS ) {
 
 	unloopedCurrentTime = this.currentTime;
 	currentTime         = this.currentTime = this.currentTime % this.data.length;
-	frame               = parseInt( Math.min( currentTime * this.data.fps, this.data.length * this.data.fps ), 10 );
 
+	// if looped around, the current time should be based on the startTime
+	if ( currentTime < this.startTimeMs ) {
 
-	// update
-
-	for ( var h = 0, hl = this.hierarchy.length; h < hl; h++ ) {
-
-		object = this.hierarchy[ h ];
-		animationCache = object.animationCache;
-
-		// use JIT?
-
-		if ( this.JITCompile && JIThierarchy[ h ][ frame ] !== undefined ) {
-
-			if( object instanceof THREE.Bone ) {
-
-				object.skinMatrix = JIThierarchy[ h ][ frame ];
+		currentTime = this.currentTime = this.startTimeMs + currentTime;
 
-				object.matrixAutoUpdate = false;
-				object.matrixWorldNeedsUpdate = false;
-
-			} else {
+	}
 
-				object.matrix = JIThierarchy[ h ][ frame ];
+	frame               = parseInt( Math.min( currentTime * this.data.fps, this.data.length * this.data.fps ), 10 );
+	looped 				= currentTime < unloopedCurrentTime;
 
-				object.matrixAutoUpdate = false;
-				object.matrixWorldNeedsUpdate = true;
+	if ( looped && !this.loop ) {
 
-			}
+		// Set the animation to the last keyframes and stop
+		for ( var h = 0, hl = this.hierarchy.length; h < hl; h++ ) {
 
-		// use interpolation
+			var keys = this.data.hierarchy[h].keys,
+				sids = this.data.hierarchy[h].sids,
+				end = keys.length-1,
+				obj = this.hierarchy[h];
 
-		} else {
+			if ( keys.length ) {
 
-			// make sure so original matrix and not JIT matrix is set
+				for ( var s = 0; s < sids.length; s++ ) {
 
-			if ( this.JITCompile ) {
+					var sid = sids[ s ],
+						prev = this.getPrevKeyWith( sid, h, end );
 
-				if( object instanceof THREE.Bone ) {
+					if ( prev ) {
 
-					object.skinMatrix = object.animationCache.originalMatrix;
+						prev.apply( sid );
 
-				} else {
-
-					object.matrix = object.animationCache.originalMatrix;
+					}
 
 				}
 
-			}
-
-
-			// loop through pos/rot/scl
-
-			for ( var t = 0; t < 3; t++ ) {
-
-				// get keys
+				this.data.hierarchy[h].node.updateMatrix();
+				obj.matrixWorldNeedsUpdate = true;
 
-				type    = types[ t ];
-				prevKey = animationCache.prevKey[ type ];
-				nextKey = animationCache.nextKey[ type ];
-
-				// switch keys?
+			}
 
-				if ( nextKey.time <= unloopedCurrentTime ) {
+		}
 
-					// did we loop?
+		this.stop();
+		return;
 
-					if ( currentTime < unloopedCurrentTime ) {
+	}
 
-						if ( this.loop ) {
+	// check pre-infinity
+	if ( currentTime < this.startTime ) {
 
-							prevKey = this.data.hierarchy[ h ].keys[ 0 ];
-							nextKey = this.getNextKeyWith( type, h, 1 );
+		return;
 
-							while( nextKey.time < currentTime ) {
+	}
 
-								prevKey = nextKey;
-								nextKey = this.getNextKeyWith( type, h, nextKey.index + 1 );
+	// update
 
-							}
+	for ( var h = 0, hl = this.hierarchy.length; h < hl; h++ ) {
 
-						} else {
+		object = this.hierarchy[ h ];
+		node = this.data.hierarchy[ h ];
 
-							this.stop();
-							return;
+		var keys = node.keys,
+			animationCache = node.animationCache;
 
-						}
+		// use JIT?
 
-					} else {
+		if ( this.JITCompile && JIThierarchy[ h ][ frame ] !== undefined ) {
 
-						do {
+			if( object instanceof THREE.Bone ) {
 
-							prevKey = nextKey;
-							nextKey = this.getNextKeyWith( type, h, nextKey.index + 1 );
+				object.skinMatrix = JIThierarchy[ h ][ frame ];
+				object.matrixWorldNeedsUpdate = false;
 
-						} while( nextKey.time < currentTime )
+			} else {
 
-					}
+				object.matrix = JIThierarchy[ h ][ frame ];
+				object.matrixWorldNeedsUpdate = true;
 
-					animationCache.prevKey[ type ] = prevKey;
-					animationCache.nextKey[ type ] = nextKey;
+			}
 
-				}
+		// use interpolation
 
+		} else if ( keys.length ) {
 
-				object.matrixAutoUpdate = true;
-				object.matrixWorldNeedsUpdate = true;
+			// make sure so original matrix and not JIT matrix is set
 
-				scale = ( currentTime - prevKey.time ) / ( nextKey.time - prevKey.time );
-				prevXYZ = prevKey[ type ];
-				nextXYZ = nextKey[ type ];
+			if ( this.JITCompile && animationCache ) {
 
+				if( object instanceof THREE.Bone ) {
 
-				// check scale error
+					object.skinMatrix = animationCache.originalMatrix;
 
-				if ( scale < 0 || scale > 1 ) {
+				} else {
 
-					console.log( "THREE.Animation.update: Warning! Scale out of bounds:" + scale + " on bone " + h );
-					scale = scale < 0 ? 0 : 1;
+					object.matrix = animationCache.originalMatrix;
 
 				}
 
-				// interpolate
+			}
 
-				if ( type === "pos" ) {
+			prevKey = animationCache.prevKey;
+			nextKey = animationCache.nextKey;
 
-					vector = object.position;
+			if ( prevKey && nextKey ) {
 
-					if( this.interpolationType === THREE.AnimationHandler.LINEAR ) {
+				// switch keys?
 
-						vector.x = prevXYZ[ 0 ] + ( nextXYZ[ 0 ] - prevXYZ[ 0 ] ) * scale;
-						vector.y = prevXYZ[ 1 ] + ( nextXYZ[ 1 ] - prevXYZ[ 1 ] ) * scale;
-						vector.z = prevXYZ[ 2 ] + ( nextXYZ[ 2 ] - prevXYZ[ 2 ] ) * scale;
+				if ( nextKey.time <= unloopedCurrentTime ) {
+
+					// did we loop?
 
-					} else if ( this.interpolationType === THREE.AnimationHandler.CATMULLROM ||
-							    this.interpolationType === THREE.AnimationHandler.CATMULLROM_FORWARD ) {
+					if ( looped && this.loop ) {
 
-						this.points[ 0 ] = this.getPrevKeyWith( "pos", h, prevKey.index - 1 )[ "pos" ];
-						this.points[ 1 ] = prevXYZ;
-						this.points[ 2 ] = nextXYZ;
-						this.points[ 3 ] = this.getNextKeyWith( "pos", h, nextKey.index + 1 )[ "pos" ];
+						prevKey = keys[ 0 ];
+						nextKey = keys[ 1 ];
 
-						scale = scale * 0.33 + 0.33;
+						while ( nextKey.time < currentTime ) {
 
-						currentPoint = this.interpolateCatmullRom( this.points, scale );
+							prevKey = nextKey;
+							nextKey = keys[ prevKey.index + 1 ];
 
-						vector.x = currentPoint[ 0 ];
-						vector.y = currentPoint[ 1 ];
-						vector.z = currentPoint[ 2 ];
+						}
 
-						if( this.interpolationType === THREE.AnimationHandler.CATMULLROM_FORWARD ) {
+					} else if ( !looped ) {
 
-							forwardPoint = this.interpolateCatmullRom( this.points, scale * 1.01 );
+						var lastIndex = keys.length - 1;
 
-							this.target.set( forwardPoint[ 0 ], forwardPoint[ 1 ], forwardPoint[ 2 ] );
-							this.target.subSelf( vector );
-							this.target.y = 0;
-							this.target.normalize();
+						while ( nextKey.time < currentTime && nextKey.index !== lastIndex ) {
 
-							angle = Math.atan2( this.target.x, this.target.z );
-							object.rotation.set( 0, angle, 0 );
+							prevKey = nextKey;
+							nextKey = keys[ prevKey.index + 1 ];
 
 						}
 
 					}
 
-				} else if ( type === "rot" ) {
-
-					THREE.Quaternion.slerp( prevXYZ, nextXYZ, object.quaternion, scale );
-
-				} else if( type === "scl" ) {
-
-					vector = object.scale;
-
-					vector.x = prevXYZ[ 0 ] + ( nextXYZ[ 0 ] - prevXYZ[ 0 ] ) * scale;
-					vector.y = prevXYZ[ 1 ] + ( nextXYZ[ 1 ] - prevXYZ[ 1 ] ) * scale;
-					vector.z = prevXYZ[ 2 ] + ( nextXYZ[ 2 ] - prevXYZ[ 2 ] ) * scale;
+					animationCache.prevKey = prevKey;
+					animationCache.nextKey = nextKey;
 
 				}
 
+				prevKey.interpolate( nextKey, currentTime );
+
 			}
 
+			this.data.hierarchy[h].node.updateMatrix();
+			object.matrixWorldNeedsUpdate = true;
+
 		}
 
 	}
@@ -361,7 +363,7 @@ THREE.Animation.prototype.update = function( deltaTimeMS ) {
 
 		if ( JIThierarchy[ 0 ][ frame ] === undefined ) {
 
-			this.hierarchy[ 0 ].update( null, true );
+			this.hierarchy[ 0 ].updateMatrixWorld( true );
 
 			for ( var h = 0; h < this.hierarchy.length; h++ ) {
 
@@ -429,7 +431,7 @@ THREE.Animation.prototype.interpolate = function( p0, p1, p2, p3, t, t2, t3 ) {
 
 // Get next key with
 
-THREE.Animation.prototype.getNextKeyWith = function( type, h, key ) {
+THREE.Animation.prototype.getNextKeyWith = function( sid, h, key ) {
 
 	var keys = this.data.hierarchy[ h ].keys;
 
@@ -446,7 +448,7 @@ THREE.Animation.prototype.getNextKeyWith = function( type, h, key ) {
 
 	for ( ; key < keys.length; key++ ) {
 
-		if ( keys[ key ][ type ] !== undefined ) {
+		if ( keys[ key ].hasTarget( sid ) ) {
 
 			return keys[ key ];
 
@@ -454,13 +456,13 @@ THREE.Animation.prototype.getNextKeyWith = function( type, h, key ) {
 
 	}
 
-	return this.data.hierarchy[ h ].keys[ 0 ];
+	return keys[ 0 ];
 
 };
 
 // Get previous key with
 
-THREE.Animation.prototype.getPrevKeyWith = function( type, h, key ) {
+THREE.Animation.prototype.getPrevKeyWith = function( sid, h, key ) {
 
 	var keys = this.data.hierarchy[ h ].keys;
 
@@ -478,7 +480,7 @@ THREE.Animation.prototype.getPrevKeyWith = function( type, h, key ) {
 
 	for ( ; key >= 0; key-- ) {
 
-		if ( keys[ key ][ type ] !== undefined ) {
+		if ( keys[ key ].hasTarget( sid ) ) {
 
 			return keys[ key ];
 
@@ -486,6 +488,6 @@ THREE.Animation.prototype.getPrevKeyWith = function( type, h, key ) {
 
 	}
 
-	return this.data.hierarchy[ h ].keys[ keys.length - 1 ];
+	return keys[ keys.length - 1 ];
 
 };

src/extras/animation/AnimationHandler.js

@@ -149,7 +149,7 @@ THREE.AnimationHandler = (function() {
 
 			// prepare morph target keys
 
-			if( data.hierarchy[ h ].keys[ 0 ].morphTargets !== undefined ) {
+			if( data.hierarchy[h].keys.length && data.hierarchy[ h ].keys[ 0 ].morphTargets !== undefined ) {
 
 				// get all used
 
@@ -219,7 +219,7 @@ THREE.AnimationHandler = (function() {
 
 			// set index
 
-			for( var k = 1; k < data.hierarchy[ h ].keys.length; k ++ ) {
+			for( var k = 0; k < data.hierarchy[ h ].keys.length; k ++ ) {
 
 				data.hierarchy[ h ].keys[ k ].index = k;
 

src/extras/loaders/JSONLoader.js

@@ -52,16 +52,15 @@ THREE.JSONLoader.prototype.loadAjaxJSON = function( context, url, callback, text
 
 					var jsonObject = JSON.parse( xhr.responseText );
 
-					context.createModel( jsonObject, callback, texturePath );
-					context.onLoadComplete();
-
 				} catch ( error ) {
 
-					console.error( error );
 					console.warn( "DEPRECATED: [" + url + "] seems to be using old model format" );
 
 				}
 
+				context.createModel( jsonObject, callback, texturePath );
+				context.onLoadComplete();
+
 			} else {
 
 				console.error( "Couldn't load [" + url + "] [" + xhr.status + "]" );
@@ -396,6 +395,7 @@ THREE.JSONLoader.prototype.createModel = function ( json, callback, texture_path
 				dstVertices = geometry.morphTargets[ i ].vertices;
 				srcVertices = json.morphTargets [ i ].vertices;
 
+
 				for( v = 0, vl = srcVertices.length; v < vl; v += 3 ) {
 
 					x = srcVertices[ v ] * scale;

src/extras/loaders/Loader.js

@@ -112,17 +112,16 @@ THREE.Loader.prototype = {
 		function load_image( where, url ) {
 
 			var image = new Image();
-
 			image.onload = function () {
 
 				if ( !is_pow2( this.width ) || !is_pow2( this.height ) ) {
 
-					var w = nearest_pow2( this.width ),
-						h = nearest_pow2( this.height );
+					var width = nearest_pow2( this.width );
+					var height = nearest_pow2( this.height );
 
-					where.image.width = w;
-					where.image.height = h;
-					where.image.getContext("2d").drawImage( this, 0, 0, w, h );
+					where.image.width = width;
+					where.image.height = height;
+					where.image.getContext( '2d' ).drawImage( this, 0, 0, width, height );
 
 				} else {
 
@@ -133,7 +132,7 @@ THREE.Loader.prototype = {
 				where.needsUpdate = true;
 
 			};
-
+			image.crossOrigin = '';
 			image.src = url;
 
 		}

src/renderers/WebGLRenderer.js

@@ -4490,7 +4490,13 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		object._modelViewMatrix.multiplyToArray( camera.matrixWorldInverse, object.matrixWorld, object._modelViewMatrixArray );
 
-		THREE.Matrix4.makeInvert3x3( object._modelViewMatrix ).transposeIntoArray( object._normalMatrixArray );
+		var inverseMatrix = THREE.Matrix4.makeInvert3x3( object._modelViewMatrix );
+
+		if ( inverseMatrix ) {
+
+			inverseMatrix.transposeIntoArray( object._normalMatrixArray );
+
+		}
 
 	};