Refactored shadowmap example to use MorphAnimMesh.

build/Three.js

@@ -135,8 +135,8 @@ THREE.SkinnedMesh.prototype.update=function(b,c,e){if(this.visible){this.matrixA
 c*16)}};THREE.SkinnedMesh.prototype.addBone=function(b){b===void 0&&(b=new THREE.Bone(this));this.bones.push(b);return b};
 THREE.SkinnedMesh.prototype.pose=function(){this.update(void 0,!0);for(var b,c=[],e=0;e<this.bones.length;e++)b=this.bones[e],c.push(THREE.Matrix4.makeInvert(b.skinMatrix)),b.skinMatrix.flattenToArrayOffset(this.boneMatrices,e*16);if(this.geometry.skinVerticesA===void 0){this.geometry.skinVerticesA=[];this.geometry.skinVerticesB=[];var f;for(b=0;b<this.geometry.skinIndices.length;b++){var e=this.geometry.vertices[b].position,h=this.geometry.skinIndices[b].x,k=this.geometry.skinIndices[b].y;f=new THREE.Vector3(e.x,
 e.y,e.z);this.geometry.skinVerticesA.push(c[h].multiplyVector3(f));f=new THREE.Vector3(e.x,e.y,e.z);this.geometry.skinVerticesB.push(c[k].multiplyVector3(f));this.geometry.skinWeights[b].x+this.geometry.skinWeights[b].y!==1&&(e=(1-(this.geometry.skinWeights[b].x+this.geometry.skinWeights[b].y))*0.5,this.geometry.skinWeights[b].x+=e,this.geometry.skinWeights[b].y+=e)}}};
-THREE.MorphAnimMesh=function(b,c){THREE.Mesh.call(this,b,c);this.duration=1E3;this.mirroredLoop=!1;this.offset=this.time=this.currentKeyframe=this.lastKeyframe=0;this.direction=1;this.directionBackwards=!1};THREE.MorphAnimMesh.prototype=new THREE.Mesh;THREE.MorphAnimMesh.prototype.constructor=THREE.MorphAnimMesh;
-THREE.MorphAnimMesh.prototype.updateAnimation=function(b){var c=this.duration/this.geometry.morphTargets.length;this.time+=this.direction*b;if(this.mirroredLoop){if(this.time>this.duration||this.time<0){this.direction*=-1;if(this.time>this.duration)this.time=this.duration,this.directionBackwards=!0;if(this.time<0)this.time=0,this.directionBackwards=!1}}else this.time%=this.duration;b=THREE.MathUtils.clamp(Math.floor(this.time/c),0,this.geometry.morphTargets.length-1);if(b!=this.currentKeyframe)this.morphTargetInfluences[this.lastKeyframe]=
+THREE.MorphAnimMesh=function(b,c){THREE.Mesh.call(this,b,c);this.duration=1E3;this.mirroredLoop=!1;this.currentKeyframe=this.lastKeyframe=this.time=0;this.direction=1;this.directionBackwards=!1};THREE.MorphAnimMesh.prototype=new THREE.Mesh;THREE.MorphAnimMesh.prototype.constructor=THREE.MorphAnimMesh;
+THREE.MorphAnimMesh.prototype.updateAnimation=function(b){var c=this.duration/(this.geometry.morphTargets.length-1);this.time+=this.direction*b;if(this.mirroredLoop){if(this.time>this.duration||this.time<0){this.direction*=-1;if(this.time>this.duration)this.time=this.duration,this.directionBackwards=!0;if(this.time<0)this.time=0,this.directionBackwards=!1}}else this.time%=this.duration;b=THREE.MathUtils.clamp(Math.floor(this.time/c),0,this.geometry.morphTargets.length-1);if(b!=this.currentKeyframe)this.morphTargetInfluences[this.lastKeyframe]=
 0,this.morphTargetInfluences[this.currentKeyframe]=1,this.morphTargetInfluences[b]=0,this.lastKeyframe=this.currentKeyframe,this.currentKeyframe=b;c=this.time%c/c;this.directionBackwards&&(c=1-c);this.morphTargetInfluences[this.currentKeyframe]=c;this.morphTargetInfluences[this.lastKeyframe]=1-c};THREE.Ribbon=function(b,c){THREE.Object3D.call(this);this.geometry=b;this.materials=c instanceof Array?c:[c]};THREE.Ribbon.prototype=new THREE.Object3D;THREE.Ribbon.prototype.constructor=THREE.Ribbon;
 THREE.LOD=function(){THREE.Object3D.call(this);this.LODs=[]};THREE.LOD.prototype=new THREE.Object3D;THREE.LOD.prototype.constructor=THREE.LOD;THREE.LOD.prototype.supr=THREE.Object3D.prototype;THREE.LOD.prototype.addLevel=function(b,c){c===void 0&&(c=0);for(var c=Math.abs(c),e=0;e<this.LODs.length;e++)if(c<this.LODs[e].visibleAtDistance)break;this.LODs.splice(e,0,{visibleAtDistance:c,object3D:b});this.add(b)};
 THREE.LOD.prototype.update=function(b,c,e){this.matrixAutoUpdate&&(c|=this.updateMatrix());if(c||this.matrixWorldNeedsUpdate)b?this.matrixWorld.multiply(b,this.matrix):this.matrixWorld.copy(this.matrix),this.matrixWorldNeedsUpdate=!1,c=!0;if(this.LODs.length>1){b=e.matrixWorldInverse;b=-(b.n31*this.position.x+b.n32*this.position.y+b.n33*this.position.z+b.n34);this.LODs[0].object3D.visible=!0;for(var f=1;f<this.LODs.length;f++)if(b>=this.LODs[f].visibleAtDistance)this.LODs[f-1].object3D.visible=!1,

examples/webgl_shadowmap.html

@@ -60,10 +60,12 @@
 
 			var sceneHUD, cameraOrtho, hudMaterial;
 
-			var morphs = [];
+			var morph, morphs = [];
 
 			var light;
 
+			var delta, newTime, oldTime;
+
 			init();
 			animate();
 
@@ -246,7 +248,11 @@
 
 					if ( fudgeColor ) THREE.ColorUtils.adjustHSV( material.color, 0, 0.5 - Math.random(), 0.5 - Math.random() );
 
-					var meshAnim = new THREE.Mesh( geometry, material );
+					var meshAnim = new THREE.MorphAnimMesh( geometry, material );
+
+					meshAnim.speed = speed;
+					meshAnim.duration = duration;
+					meshAnim.time = 600 * Math.random();
 
 					meshAnim.position.set( x, y, z );
 					meshAnim.rotation.y = Math.PI/2;
@@ -256,9 +262,7 @@
 
 					scene.add( meshAnim );
 
-					morphs.push( { mesh: meshAnim, lastKeyframe: 0, currentKeyframe: 0,
-								   offset: Math.random() * 6, speed: speed, duration: duration,
-								   oldTime: new Date().getTime() } );
+					morphs.push( meshAnim );
 
 				}
 
@@ -343,69 +347,45 @@
 					addMorph( geometry, 0.45, 500, 500 - Math.random() * 500, FLOOR + 300, 700 );
 
 				} } );
-
 				*/
 
 			}
 
+			//
 
-			var t = 0, newTime, delta;
-
-
-			function updateMorph( morph ) {
+			function animate() {
 
-				// Alternate morph targets
+				requestAnimationFrame( animate );
 
-				var interpolation = morph.duration / ( morph.mesh.geometry.morphTargets.length - 1 );
+				render();
+				stats.update();
 
-				var time = ( new Date().getTime()  + morph.offset * 100 ) % morph.duration;
-				var keyframe = Math.floor( time / interpolation ) + 1;
+			}
 
-				var mesh = morph.mesh;
+			function render() {
 
-				if ( keyframe != morph.currentKeyframe ) {
+				if ( oldTime === undefined ) oldTime = new Date().getTime();
 
-					mesh.morphTargetInfluences[ morph.lastKeyframe ] = 0;
-					mesh.morphTargetInfluences[ morph.currentKeyframe ] = 1;
-					mesh.morphTargetInfluences[ keyframe ] = 0;
+				newTime = new Date().getTime();
+				delta = newTime - oldTime;
+				oldTime = newTime;
 
-					morph.lastKeyframe = morph.currentKeyframe;
-					morph.currentKeyframe = keyframe;
+				for ( var i = 0; i < morphs.length; i ++ ) {
 
-				}
+					morph = morphs[ i ];
 
-				mesh.morphTargetInfluences[ keyframe ] = ( time % interpolation ) / interpolation;
-				mesh.morphTargetInfluences[ morph.lastKeyframe ] = 1 - mesh.morphTargetInfluences[ keyframe ];
+					morph.updateAnimation( delta );
 
-				var newTime = new Date().getTime();
-				delta = newTime - morph.oldTime;
-				morph.oldTime = newTime;
+					morph.position.x += morph.speed * delta;
 
-				mesh.position.x += morph.speed * delta;
+					if ( morph.position.x  > 2000 )  {
 
-				if ( mesh.position.x  > 2000 )  {
+						morph.position.x = -1000 - Math.random() * 500;
 
-					mesh.position.x = -1000 - Math.random() * 500;
+					}
 
 				}
 
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-				stats.update();
-
-			}
-
-			function render() {
-
-				for ( var i = 0; i < morphs.length; i++ ) updateMorph( morphs[ i ] );
-
 				controls.update();
 
 				renderer.clear();

src/objects/MorphAnimMesh.js

@@ -10,15 +10,13 @@ THREE.MorphAnimMesh = function( geometry, materials ) {
 
 	this.duration = 1000; // milliseconds
 	this.mirroredLoop = false;
+	this.time = 0;
 
 	// internals
 
 	this.lastKeyframe = 0;
 	this.currentKeyframe = 0;
 
-	this.time = 0;
-	this.offset = 0;
-
 	this.direction = 1;
 	this.directionBackwards = false;
 
@@ -29,7 +27,7 @@ THREE.MorphAnimMesh.prototype.constructor = THREE.MorphAnimMesh;
 
 THREE.MorphAnimMesh.prototype.updateAnimation = function ( delta ) {
 
-	var frameTime = this.duration / this.geometry.morphTargets.length;
+	var frameTime = this.duration / ( this.geometry.morphTargets.length - 1 );
 
 	this.time += this.direction * delta;