sea3d animation to animator keyframe variable name (#8963)

* animation to animator keyframe variable name

* golden ratio align and descriptions

* text to description

* play with computed offset negative timeScale animation

* clampWhenFinished only for non-loop animations

examples/js/loaders/sea3d/SEA3DLoader.js

@@ -502,13 +502,13 @@ THREE.SEA3D.Animator.prototype.updateAnimations = function( mixer ) {
 	this.animations = [];
 	this.animationsData = {};
 
-	var animations = this instanceof THREE.SEA3D.Animator ? this.clips : this.geometry.animations;
+	this.clips = this instanceof THREE.SEA3D.Animator ? this.clips : this.geometry.animations;
 
-	for ( var i = 0; i < animations.length; i ++ ) {
+	for ( var i = 0, clips = this.clips; i < clips.length; i ++ ) {
 
-		var name = animations[ i ].name;
+		var name = clips[ i ].name;
 
-		this.animations[ name ] = this.animations[ i ] = animations[ i ];
+		this.animations[ name ] = this.animations[ i ] = clips[ i ];
 		this.animationsData[ name ] = this.animationsData[ i ] = {};
 
 	}
@@ -579,7 +579,9 @@ THREE.SEA3D.Animator.prototype.play = function( name, crossfade, offset, weight
 
 	if ( animation == this.currentAnimation ) {
 
-		if ( offset !== undefined || ! animation.loop ) this.currentAnimationAction.time = offset !== undefined ? offset : 0;
+		if ( offset !== undefined || ! animation.loop ) this.currentAnimationAction.time = offset !== undefined ? offset : 
+			( this.currentAnimationAction.timeScale >= 0 ? 0 : this.currentAnimation.duration );
+
 		this.currentAnimationAction.setEffectiveWeight( weight !== undefined ? weight : 1 );
 		this.currentAnimationAction.paused = false;
 
@@ -594,7 +596,7 @@ THREE.SEA3D.Animator.prototype.play = function( name, crossfade, offset, weight
 
 		this.previousAnimationAction = this.currentAnimationAction;
 		this.currentAnimationAction = this.mixer.clipAction( animation ).setLoop( animation.loop ? THREE.LoopRepeat : THREE.LoopOnce, Infinity ).reset();
-		this.currentAnimationAction.clampWhenFinished = true;
+		this.currentAnimationAction.clampWhenFinished = ! animation.loop;
 		this.currentAnimationAction.paused = false;
 
 		this.previousAnimationData = this.currentAnimationData;
@@ -602,7 +604,9 @@ THREE.SEA3D.Animator.prototype.play = function( name, crossfade, offset, weight
 
 		this.updateTimeScale();
 
-		if ( offset !== undefined || ! animation.loop ) this.currentAnimationAction.time = offset !== undefined ? offset : 0;
+		if ( offset !== undefined || ! animation.loop ) this.currentAnimationAction.time = offset !== undefined ? offset : 
+			( this.currentAnimationAction.timeScale >= 0 ? 0 : this.currentAnimation.duration );
+
 		this.currentAnimationAction.setEffectiveWeight( weight !== undefined ? weight : 1 );
 
 		this.currentAnimationAction.play();
@@ -857,7 +861,7 @@ THREE.SEA3D.Dummy.prototype.copy = function( source ) {
 	this.props = source.props;
 	this.scripts = source.scripts;
 
-	if ( this.animation ) this.animation = source.animation.clone( this );
+	if ( this.animator ) this.animator = source.animator.clone( this );
 
 	return this;
 
@@ -903,7 +907,7 @@ THREE.SEA3D.Mesh.prototype.copy = function( source ) {
 	this.props = source.props;
 	this.scripts = source.scripts;
 
-	if ( this.animation ) this.animation = source.animation.clone( this );
+	if ( this.animator ) this.animator = source.animator.clone( this );
 
 	return this;
 
@@ -948,7 +952,7 @@ THREE.SEA3D.SkinnedMesh.prototype.copy = function( source ) {
 	this.props = source.props;
 	this.scripts = source.scripts;
 
-	if ( this.animation ) this.animation = source.animation.clone( this );
+	if ( this.animator ) this.animator = source.animator.clone( this );
 
 	return this;
 
@@ -982,7 +986,7 @@ THREE.SEA3D.VertexAnimationMesh.prototype.copy = function( source ) {
 	this.props = source.props;
 	this.scripts = source.scripts;
 
-	if ( this.animation ) this.animation = source.animation.clone( this );
+	if ( this.animator ) this.animator = source.animator.clone( this );
 
 	return this;
 
@@ -1010,7 +1014,7 @@ THREE.SEA3D.Camera.prototype.copy = function( source ) {
 	this.props = source.props;
 	this.scripts = source.scripts;
 
-	if ( this.animation ) this.animation = source.animation.clone( this );
+	if ( this.animator ) this.animator = source.animator.clone( this );
 
 	return this;
 
@@ -1038,7 +1042,7 @@ THREE.SEA3D.OrthographicCamera.prototype.copy = function( source ) {
 	this.props = source.props;
 	this.scripts = source.scripts;
 
-	if ( this.animation ) this.animation = source.animation.clone( this );
+	if ( this.animator ) this.animator = source.animator.clone( this );
 
 	return this;
 
@@ -1066,7 +1070,7 @@ THREE.SEA3D.PointLight.prototype.copy = function( source ) {
 	this.props = source.props;
 	this.scripts = source.scripts;
 
-	if ( this.animation ) this.animation = source.animation.clone( this );
+	if ( this.animator ) this.animator = source.animator.clone( this );
 
 	return this;
 
@@ -1339,16 +1343,16 @@ THREE.SEA3D.prototype.applyDefaultAnimation = function( sea, animatorClass ) {
 
 		switch ( anm.tag.type ) {
 			case SEA3D.Animation.prototype.type:
-				obj.animation = new animatorClass( anm.tag.tag, obj );
-				obj.animation.setRelative( anm.relative );
+				obj.animator = new animatorClass( anm.tag.tag, obj );
+				obj.animator.setRelative( anm.relative );
 
 				if ( this.config.autoPlay ) {
 
-					obj.animation.play( 0 );
+					obj.animator.play( 0 );
 
 				}
 
-				return obj.animation;
+				return obj.animator;
 				break;
 		}
 
@@ -2371,7 +2375,7 @@ THREE.SEA3D.PointSound.prototype.copy = function( source ) {
 	this.props = source.props;
 	this.scripts = source.scripts;
 
-	if ( this.animation ) this.animation = source.animation.clone( this );
+	if ( this.animator ) this.animator = source.animator.clone( this );
 
 	return this;
 

examples/webgl_loader_sea3d_hierarchy.html

@@ -81,8 +81,8 @@
 
 				for(var i = 0; i < loader.meshes.length; i++) {
 
-					if (loader.meshes[i].animation)
-						loader.meshes[i].animation.play( "root" );
+					if (loader.meshes[i].animator)
+						loader.meshes[i].animator.play( "root" );
 
 				}
 

examples/webgl_loader_sea3d_keyframe.html

@@ -107,8 +107,8 @@
 
 				for(var i = 0; i < loader.meshes.length; i++) {
 
-					if (loader.meshes[i].animation)
-						loader.meshes[i].animation.play(id, crossfade, offset);
+					if (loader.meshes[i].animator)
+						loader.meshes[i].animator.play(id, crossfade, offset);
 
 				}
 
@@ -118,8 +118,8 @@
 
 				for(var i = 0; i < loader.meshes.length; i++) {
 
-					if (loader.meshes[i].animation)
-						loader.meshes[i].animation.setTimeScale( timeScale );
+					if (loader.meshes[i].animator)
+						loader.meshes[i].animator.setTimeScale( timeScale );
 
 				}
 
@@ -129,8 +129,8 @@
 
 				for(var i = 0; i < loader.meshes.length; i++) {
 
-					if (loader.meshes[i].animation)
-						loader.meshes[i].animation.stop();
+					if (loader.meshes[i].animator)
+						loader.meshes[i].animator.stop();
 
 				}
 
@@ -239,15 +239,15 @@
 
 						var fracture99 = loader.getMesh("Object099");
 
-						//fracture99.animation.setTimeScale( 1 );
-						//fracture99.animation.playing
-						//fracture99.animation.currentAnimation
-						//fracture99.animation.previousAnimation
+						//fracture99.animator.setTimeScale( 1 );
+						//fracture99.animator.playing
+						//fracture99.animator.currentAnimation
+						//fracture99.animator.previousAnimation
 
-						fracture99.animation.play("crash#2", .5, 0);
-						//fracture99.animation.stop();
-						//fracture99.animation.pause();
-						//fracture99.animation.resume();
+						fracture99.animator.play("crash#2", .5, 0);
+						//fracture99.animator.stop();
+						//fracture99.animator.pause();
+						//fracture99.animator.resume();
 
 						description("crash#2 in single object - crossfade 0.5 seconds");
 

examples/webgl_loader_sea3d_skinning.html

@@ -30,7 +30,8 @@
 		<div id="info">
 			<a href="http://threejs.org" target="_blank">three.js</a> - asset by <a href="https://github.com/sunag/sea3d" style="color:#FFFFF" target="_blank">sea3d</a>
 			<br/>BoneObject: Object3D attached in a Bone
-			<br/>Left Click to hidden/show the hat - Right click to run - Middle click to clone
+			<br/>Left Click to hidden/show the hat - Right click to run
+			<br/><div id="playercount"></div>
 		</div>
 
 		<script src="../build/three.js"></script>
@@ -107,19 +108,30 @@
 
 				animate();
 
+				updatePlayerCountDescription( 1 );
+
 			};
 
 			loader.load( './models/sea3d/skin.tjs.sea' );
 
 			//
 
+			function updatePlayerCountDescription( count ) {
+
+				document.getElementById("playercount").innerText = "Numbers of players " + count + " | Middle click to clone";
+
+			}
+
 			var cloneAsset = function() {
 
-				var count = 0, size = 50;
+				var count = 2, size = 25;
 
 				return function() {
 
-					var angle = ( Math.PI / 4 ) * count++;
+					updatePlayerCountDescription( count );
+
+					var PHI = Math.PI * 2 * (Math.sqrt(5) + 1) / 2;  // golden ratio
+					var angle = PHI * count++;
 
 					var container = new THREE.Object3D();
 					container.position.z = ( size * count ) * Math.cos( angle );