Added MorphAnimation.

examples/canvas_morphtargets_horse.html

@@ -23,7 +23,7 @@
 
 			var container, stats;
 			var camera, scene, projector, renderer;
-			var mesh;
+			var mesh, animation;
 
 			init();
 			animate();
@@ -66,6 +66,9 @@
 					mesh.scale.set( 1.5, 1.5, 1.5 );
 					scene.add( mesh );
 
+					animation = new THREE.MorphAnimation( mesh );
+					animation.play();
+
 				} );
 
 				//
@@ -112,9 +115,7 @@
 			var radius = 600;
 			var theta = 0;
 
-			var duration = 1000;
-			var keyframes = 15, interpolation = duration / keyframes;
-			var lastKeyframe = 0, currentKeyframe = 0;
+			var prevTime = Date.now();
 
 			function render() {
 
@@ -125,29 +126,13 @@
 
 				camera.lookAt( camera.target );
 
-				if ( mesh ) {
-
-					// Alternate morph targets
-
-					var time = Date.now() % duration;
-
-					var keyframe = Math.floor( time / interpolation );
-
-					if ( keyframe != currentKeyframe ) {
-
-						mesh.morphTargetInfluences[ lastKeyframe ] = 0;
-						mesh.morphTargetInfluences[ currentKeyframe ] = 1;
-						mesh.morphTargetInfluences[ keyframe ] = 0;
-
-						lastKeyframe = currentKeyframe;
-						currentKeyframe = keyframe;
+				if ( animation ) {
 
-						// console.log( mesh.morphTargetInfluences );
+					var time = Date.now();
 
-					}
+					animation.update( time - prevTime );
 
-					mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
-					mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];
+					prevTime = time;
 
 				}
 

examples/webgl_morphtargets_horse.html

@@ -23,7 +23,7 @@
 
 			var container, stats;
 			var camera, scene, projector, renderer;
-			var mesh;
+			var mesh, animation;
 
 			init();
 			animate();
@@ -66,6 +66,9 @@
 					mesh.scale.set( 1.5, 1.5, 1.5 );
 					scene.add( mesh );
 
+					animation = new THREE.MorphAnimation( mesh );
+					animation.play();
+
 				} );
 
 				//
@@ -112,9 +115,7 @@
 			var radius = 600;
 			var theta = 0;
 
-			var duration = 1000;
-			var keyframes = 15, interpolation = duration / keyframes;
-			var lastKeyframe = 0, currentKeyframe = 0;
+			var prevTime = Date.now();
 
 			function render() {
 
@@ -125,29 +126,13 @@
 
 				camera.lookAt( camera.target );
 
-				if ( mesh ) {
-
-					// Alternate morph targets
-
-					var time = Date.now() % duration;
-
-					var keyframe = Math.floor( time / interpolation );
-
-					if ( keyframe != currentKeyframe ) {
-
-						mesh.morphTargetInfluences[ lastKeyframe ] = 0;
-						mesh.morphTargetInfluences[ currentKeyframe ] = 1;
-						mesh.morphTargetInfluences[ keyframe ] = 0;
-
-						lastKeyframe = currentKeyframe;
-						currentKeyframe = keyframe;
+				if ( animation ) {
 
-						// console.log( mesh.morphTargetInfluences );
+					var time = Date.now();
 
-					}
+					animation.update( time - prevTime );
 
-					mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
-					mesh.morphTargetInfluences[ lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];
+					prevTime = time;
 
 				}
 

src/extras/animation/AnimationMorphTarget.js

@@ -1,217 +0,0 @@
-/**
- * @author mikael emtinger / http://gomo.se/
- */
-
-THREE.AnimationMorphTarget = function( root, data ) {
-
-	this.root = root;
-	this.data = THREE.AnimationHandler.get( data );
-	this.hierarchy = THREE.AnimationHandler.parse( root );
-	this.currentTime = 0;
-	this.timeScale = 1;
-	this.isPlaying = false;
-	this.isPaused = true;
-	this.loop = true;
-	this.influence = 1;
-}
-
-/*
- * Play
- */
-
-THREE.AnimationMorphTarget.prototype.play = function ( startTime ) {
-
-	this.currentTime = startTime !== undefined ? startTime : 0;
-
-	if ( this.isPlaying === false ) {
-
-		this.isPlaying = true;
-
-		// reset key cache
-
-		for ( var h = 0; h < this.hierarchy.length; h++ ) {
-
-			if ( this.hierarchy[ h ].animationCache === undefined ) {
-
-				this.hierarchy[ h ].animationCache = {};
-				this.hierarchy[ h ].animationCache.prevKey = 0;
-				this.hierarchy[ h ].animationCache.nextKey = 0;
-			}
-
-			this.hierarchy[ h ].animationCache.prevKey = this.data.hierarchy[ h ].keys[ 0 ];
-			this.hierarchy[ h ].animationCache.nextKey = this.data.hierarchy[ h ].keys[ 1 ];
-		}
-
-		this.update( 0 );
-	}
-
-	this.isPaused = false;
-	THREE.AnimationHandler.addToUpdate( this );
-}
-
-
-/*
- * Pause
- */
-
-THREE.AnimationMorphTarget.prototype.pause = function() {
-
-	if( this.isPaused ) {
-		
-		THREE.AnimationHandler.addToUpdate( this );
-		
-	} else {
-		
-		THREE.AnimationHandler.removeFromUpdate( this );
-		
-	}
-	
-	this.isPaused = !this.isPaused;
-}
-
-
-/*
- * Stop
- */
-
-THREE.AnimationMorphTarget.prototype.stop = function() {
-
-	this.isPlaying = false;
-	this.isPaused  = false;
-	
-	THREE.AnimationHandler.removeFromUpdate( this );
-	
-	
-	// reset JIT matrix and remove cache
-	
-	for ( var h = 0; h < this.hierarchy.length; h++ ) {
-		
-		if ( this.hierarchy[ h ].animationCache !== undefined ) {
-			
-			delete this.hierarchy[ h ].animationCache;	
-		}
-
-	}
-
-}
-
-
-/*
- * Update
- */
-
-THREE.AnimationMorphTarget.prototype.update = function( deltaTimeMS ) {
-
-	// early out
-
-	if( !this.isPlaying ) return;
-
-
-	// vars
-
-	var scale;
-	var vector;
-	var prevXYZ, nextXYZ;
-	var prevKey, nextKey;
-	var object;
-	var animationCache;
-	var currentTime, unloopedCurrentTime;
-	
-
-	// update time
-	
-	this.currentTime += deltaTimeMS * this.timeScale;
-
-	unloopedCurrentTime = this.currentTime;
-	currentTime         = this.currentTime = this.currentTime % this.data.length;
-
-
-	// update
-
-	for ( var h = 0, hl = this.hierarchy.length; h < hl; h++ ) {
-
-		object = this.hierarchy[ h ];
-		animationCache = object.animationCache;
-
-
-		// get keys
-
-		prevKey = animationCache.prevKey;
-		nextKey = animationCache.nextKey;
-
-
-		// switch keys?
-
-		if ( nextKey.time <= unloopedCurrentTime ) {
-
-			// did we loop?
-
-			if ( currentTime < unloopedCurrentTime ) {
-
-				if ( this.loop ) {
-
-					prevKey = this.data.hierarchy[ h ].keys[ 0 ];
-					nextKey = this.data.hierarchy[ h ].keys[ 1 ];
-
-					while( nextKey.time < currentTime ) {
-
-						prevKey = nextKey;
-						nextKey = this.data.hierarchy[ h ].keys[ nextKey.index + 1 ];
-
-					}
-
-				} else {
-
-					this.stop();
-					return;
-
-				}
-
-			} else {
-
-				do {
-
-					prevKey = nextKey;
-					nextKey = this.data.hierarchy[ h ].keys[ nextKey.index + 1 ];
-
-				} while( nextKey.time < currentTime )
-
-			}
-
-			animationCache.prevKey = prevKey;
-			animationCache.nextKey = nextKey;
-
-		}
-
-
-		// calc scale and check for error
-
-		scale = ( currentTime - prevKey.time ) / ( nextKey.time - prevKey.time );
-
-		if ( scale < 0 || scale > 1 ) {
-
-			console.log( "THREE.AnimationMorphTarget.update: Warning! Scale out of bounds:" + scale ); 
-			scale = scale < 0 ? 0 : 1;
-
-		}
-
-
-		// interpolate
-		
-		var pi, pmti = prevKey.morphTargetsInfluences;
-		var ni, nmti = nextKey.morphTargetsInfluences;
-		var mt, i;
-		
-		for( mt in pmti ) {
-			
-			pi = pmti[ mt ];
-			ni = nmti[ mt ];
-			i = this.root.getMorphTargetIndexByName( mt );
-			
-			this.root.morphTargetInfluences[ i ] = ( pi + ( ni - pi ) * scale ) * this.influence;
-		}
-
-	}
-
-};
-

src/extras/animation/MorphAnimation.js

@@ -0,0 +1,70 @@
+/**
+ * @author mrdoob / http://mrdoob.com
+ */
+
+THREE.MorphAnimation = function ( mesh ) {
+
+	this.mesh = mesh;
+	this.frames = mesh.morphTargetInfluences.length;
+	this.currentTime = 0;
+	this.duration = 1000;
+	this.loop = true;
+
+	this.isPlaying = false;
+
+};
+
+THREE.MorphAnimation.prototype = {
+
+	play: function () {
+
+		this.isPlaying = true;
+
+	},
+
+	pause: function () {
+
+		this.isPlaying = false;
+	},
+
+	update: ( function () {
+
+		var lastFrame = 0;
+		var currentFrame = 0;
+
+		return function ( delta ) {
+
+			if ( this.isPlaying === false ) return;
+
+			this.currentTime += delta;
+
+			var currentTime = this.currentTime;
+
+			if ( this.loop === true ) {
+
+				currentTime %= this.duration;
+
+			}
+
+			var interpolation = this.duration / this.frames;
+			var frame = Math.floor( currentTime / interpolation );
+
+			if ( frame != currentFrame ) {
+
+				mesh.morphTargetInfluences[ lastFrame ] = 0;
+				mesh.morphTargetInfluences[ currentFrame ] = 1;
+				mesh.morphTargetInfluences[ frame ] = 0;
+
+				lastFrame = currentFrame;
+				currentFrame = frame;
+
+			}
+
+			mesh.morphTargetInfluences[ frame ] = ( currentTime % interpolation ) / interpolation;
+			mesh.morphTargetInfluences[ lastFrame ] = 1 - mesh.morphTargetInfluences[ frame ];
+
+		}
+
+	} )()
+
+};

utils/build/includes/extras.json

@@ -22,6 +22,7 @@
 	"src/extras/animation/AnimationHandler.js",
 	"src/extras/animation/Animation.js",
 	"src/extras/animation/KeyFrameAnimation.js",
+	"src/extras/animation/MorphAnimation.js",
 	"src/extras/cameras/CubeCamera.js",
 	"src/extras/cameras/CombinedCamera.js",
 	"src/extras/geometries/BoxGeometry.js",