debugging new animation system along with example.

examples/webgl_animation_track_clip_mixer.html

@@ -62,6 +62,9 @@
 
 			var mesh, helper;
 
+			var mixer;
+			var time1 = 0;
+
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -253,6 +256,12 @@
 				var animation = new THREE.Animation( mesh, geometry.animation );
 				//animation.play();
 
+				mixer = new THREE.AnimationMixer( mesh );
+
+				var rotateClip = THREE.AnimationClip.CreateRotationAnimation( 10 );
+
+				mixer.addAction( new THREE.AnimationAction( rotateClip, 0, 1, 1, true ) );
+
 			}
 
 			function initGUI() {
@@ -301,6 +310,11 @@
 
 				THREE.AnimationHandler.update( delta );
 
+				if( mixer ) {
+					time1 += delta;
+					mixer.update( time1 );
+				}
+				
 				if ( helper !== undefined ) helper.update();
 
 				// update morphs

src/animation/AnimationAction.js

@@ -27,24 +27,29 @@ THREE.AnimationAction.prototype = {
 		console.log( 'AnimationAction[' + this.clip.name + '].toAnimationClipTime( ' + time + ' )' );
 
 		var clipTime = time - this.startTime;
+		console.log( '   clipTime: ' + clipTime );
 
 		clipTime *= this.timeScale;
+		console.log( '   clipTime: ' + clipTime );
 
 		if( this.loop ) {
 
 			if( clipTime < 0 ) {
 
 				clipTime = clipTime - Math.floor( clipTime / this.clip.duration ) * this.clip.duration;
+				console.log( '   clipTime: ' + clipTime );
 
 			}
 
 	   		clipTime = clipTime % this.clip.duration;
+			console.log( '   clipTime: ' + clipTime );
 
 	   	}
 	   	else {
 
 	   		clipTime = Math.min( clipTime, this.clip.duration );
 	   		clipTime = Math.max( clipTime, 0 );
+			console.log( '   clipTime: ' + clipTime );
 
 	   	}
 

src/animation/AnimationClip.js

@@ -8,11 +8,11 @@
  * @author David Sarno / http://lighthaus.us/
  */
 
-THREE.AnimationClip = function ( name, tracks, duration ) {
+THREE.AnimationClip = function ( name, duration, tracks ) {
 
 	this.name = name;
 	this.tracks = tracks;
-	this.duration = duration;
+	this.duration = duration || 1;
 
 };
 
@@ -26,7 +26,10 @@ THREE.AnimationClip.prototype = {
 
 		var results = {};
 
-		for( var track in this.tracks ) {
+		for( var trackIndex in this.tracks ) {
+
+			var track = this.tracks[ trackIndex ];
+			console.log( 'track', track );
 
 			results[ track.name ] = track.getAt( clipTime );
 
@@ -191,14 +194,14 @@ THREE.AnimationClip.CreateMorphAnimation = function( morphTargetNames, duration
 	return clip;
 };
 
-THREE.AnimationClip.CreateRotationAnimation = function( node, period, axis ) {
+THREE.AnimationClip.CreateRotationAnimation = function( period, axis ) {
 
 	var keys = [];
 	keys.push( { time: 0, value: 0 } );
 	keys.push( { time: period, value: 360 } );
 
 	axis = axis || 'x';
-	var trackName = node.name + '.rotation[' + axis + ']';
+	var trackName = '.rotation[' + axis + ']';
 
 	var track = new THREE.KeyframeTrack( trackName, keys );
 
@@ -208,7 +211,7 @@ THREE.AnimationClip.CreateRotationAnimation = function( node, period, axis ) {
 	return clip;
 };
 
-THREE.AnimationClip.CreateShakeAnimation = function( node, duration, shakeScale ) {
+THREE.AnimationClip.CreateShakeAnimation = function( duration, shakeScale ) {
 
 	var keys = [];
 
@@ -221,7 +224,7 @@ THREE.AnimationClip.CreateShakeAnimation = function( node, duration, shakeScale
 
 	}
 
-	var trackName = node.name + '.position';
+	var trackName = '.position';
 
 	var track = new THREE.KeyframeTrack( trackName, keys );
 

src/animation/AnimationMixer.js

@@ -20,8 +20,8 @@ THREE.AnimationMixer.prototype = {
 
 	constructor: THREE.AnimationMixer,
 
-	addAnimationAction: function( action ) {
-		console.log( root.name + ".AnimationMixer.addAnimationAction( " + action.name + " )" );
+	addAction: function( action ) {
+		console.log( this.root.name + ".AnimationMixer.addAnimationAction( " + action.name + " )" );
 
 		this.actions.push( action );
 
@@ -36,8 +36,8 @@ THREE.AnimationMixer.prototype = {
 
 	},
 
-	removeAnimationAction: function( action ) {
-		console.log( root.name + ".AnimationMixer.addRemove( " + action.name + " )" );
+	removeAction: function( action ) {
+		console.log( this.root.name + ".AnimationMixer.addRemove( " + action.name + " )" );
 
 		var index = this.actions.indexOf( action );
 
@@ -49,7 +49,7 @@ THREE.AnimationMixer.prototype = {
 	},
 
 	update: function( time ) {
-		console.log( root.name + ".AnimationMixer.update( " + time + " )" );
+		console.log( this.root.name + ".AnimationMixer.update( " + time + " )" );
 
 		var mixerResults = {};
 
@@ -60,16 +60,19 @@ THREE.AnimationMixer.prototype = {
 			if( action.weight <= 0 || ! action.enabled ) continue;
 
 			var actionResults = action.getAt( time );
-
-			for( var actionResult in actionResults ) {
-
-				var mixerResult = mixerResults[actionResult.name];
-
+			console.log( '   actionResults', actionResults );
+			for( var name in actionResults ) {
+
+				var mixerResult = mixerResults[name];
+				var actionResult = actionResults[name];
+				console.log( '   name', name );
+				console.log( '   mixerResult', mixerResult );
+				console.log( '   actionResult', actionResult );
+		
 				if( ! mixerResult ) {
 
-					mixerResults[actionResult.name] = {
-						name: actionResult.name,
-						cumulativeValue: actionResult.value,
+					mixerResults[name] = {
+						cumulativeValue: actionResult,
 						cumulativeWeight: action.weight
 					};
 
@@ -77,10 +80,12 @@ THREE.AnimationMixer.prototype = {
 				else {
 
 					var lerpAlpha = action.weight / ( mixerResult.cumulativeWeight + action.weight );
-					mixerResult.cumulativeValue = AnimationUtils.lerp( mixerResult.cumulativeValue, actionResult.value, lerpAlpha );
+					mixerResult.cumulativeValue = THREE.AnimationUtils.lerp( mixerResult.cumulativeValue, actionResult, lerpAlpha );
 					mixerResult.cumulativeWeight += action.weight;
 
 				}
+
+				console.log( '   mixerResults[name]', mixerResults[name] );
 			}
 
 		}
@@ -89,10 +94,13 @@ THREE.AnimationMixer.prototype = {
 		// apply to nodes
 		for ( var name in mixerResults ) {
 
+			console.log( '    track:' + name );
+
 			var mixerResult = mixerResults[ name ];
+			console.log( '    mixerResult:', mixerResult );
 
 			var propertyBinding = this.propertyBindings[ name ];
-			propertyBinding.set( mixerResult.value );
+			propertyBinding.set( mixerResult.cumulativeValue );
 			
 		}
 	}

src/animation/PropertyBinding.js

@@ -56,7 +56,7 @@ THREE.PropertyBinding.prototype = {
 		// otherwise just set the property directly on the node (do not use nodeProperty as it may not be a reference object)
 		else {
 			console.log( '  update property ' + this.name + '.' + this.propertyName + ' via assignment.' );				
-			node[ this.propertyName ] = value;	
+			this.node[ this.propertyName ] = value;	
 		}
 
 		// trigger node dirty