Merge pull request #15698 from Temdog007/feature/AnimationDisplay

THREE JS Editor: Added animation selection to GUI

editor/js/Editor.js

@@ -92,6 +92,7 @@ var Editor = function () {
 	this.materials = {};
 	this.textures = {};
 	this.scripts = {};
+	this.animations = {};
 
 	this.selected = null;
 	this.helpers = {};
@@ -239,6 +240,12 @@ Editor.prototype = {
 
 	},
 
+	addAnimation: function ( object, animations ) {
+
+		this.animations[ object.uuid ] = animations;
+
+	},
+
 	//
 
 	addHelper: function () {

editor/js/Loader.js

@@ -34,7 +34,7 @@ var Loader = function ( editor ) {
 
 			for ( var i = 0; i < files.length; i ++ ) {
 
-				scope.loadFile( files[ i ], manager ) ;
+				scope.loadFile( files[ i ], manager );
 
 			}
 
@@ -150,7 +150,7 @@ var Loader = function ( editor ) {
 					stream.offset = 0;
 
 					var loader = new THREE.CTMLoader();
-					loader.createModel( new CTM.File( stream ), function( geometry ) {
+					loader.createModel( new CTM.File( stream ), function ( geometry ) {
 
 						geometry.sourceType = "ctm";
 						geometry.sourceFile = file.name;
@@ -215,8 +215,10 @@ var Loader = function ( editor ) {
 					loader.setDRACOLoader( new THREE.DRACOLoader() );
 					loader.parse( contents, '', function ( result ) {
 
-						result.scene.name = filename;
-						editor.execute( new AddObjectCommand( result.scene ) );
+						var scene = result.scene;
+						scene.name = filename;
+						editor.addAnimation( scene, result.animations );
+						editor.execute( new AddObjectCommand( scene ) );
 
 					} );
 
@@ -245,8 +247,10 @@ var Loader = function ( editor ) {
 
 					loader.parse( contents, '', function ( result ) {
 
-						result.scene.name = filename;
-						editor.execute( new AddObjectCommand( result.scene ) );
+						var scene = result.scene;
+						scene.name = filename;
+						editor.addAnimation( scene, result.animations );
+						editor.execute( new AddObjectCommand( scene ) );
 
 					} );
 
@@ -343,6 +347,7 @@ var Loader = function ( editor ) {
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.mixer = new THREE.AnimationMixer( mesh );
 					mesh.name = filename;
+					editor.addAnimation( mesh, geometry.animations );
 
 					editor.execute( new AddObjectCommand( mesh ) );
 
@@ -450,7 +455,7 @@ var Loader = function ( editor ) {
 
 					var group = new THREE.Group();
 					group.scale.multiplyScalar( 0.1 );
-					group.scale.y *= -1;
+					group.scale.y *= - 1;
 
 					for ( var i = 0; i < paths.length; i ++ ) {
 
@@ -678,7 +683,9 @@ var Loader = function ( editor ) {
 					var loader = new THREE.GLTFLoader();
 					loader.parse( file.asArrayBuffer(), '', function ( result ) {
 
-						editor.execute( new AddObjectCommand( result.scene ) );
+						var scene = result.scene;
+						editor.addAnimation( scene, result.animations );
+						editor.execute( new AddObjectCommand( scene ) );
 
 					} );
 
@@ -689,7 +696,9 @@ var Loader = function ( editor ) {
 					var loader = new THREE.GLTFLoader( manager );
 					loader.parse( file.asText(), '', function ( result ) {
 
-						editor.execute( new AddObjectCommand( result.scene ) );
+						var scene = result.scene;
+						editor.addAnimation( scene, result.animations );
+						editor.execute( new AddObjectCommand( scene ) );
 
 					} );
 

editor/js/Sidebar.Animation.js

@@ -6,18 +6,109 @@ Sidebar.Animation = function ( editor ) {
 
 	var signals = editor.signals;
 
-	var options = {};
-	var possibleAnimations = {};
+	var renderer = null;
+
+	signals.rendererChanged.add( function ( newRenderer ) {
+
+		renderer = newRenderer;
+
+	} );
+
+	signals.objectSelected.add( function ( object ) {
+
+		var uuid = object !== null ? object.uuid : '';
+		var animations = editor.animations[ uuid ];
+		if ( animations !== undefined ) {
+
+			container.setDisplay( '' );
+
+			mixer = new THREE.AnimationMixer( object );
+			var options = {};
+			for ( var animation of animations ) {
+
+				options[ animation.name ] = animation.name;
+
+				var action = mixer.clipAction( animation );
+				actions[ animation.name ] = action;
+
+			}
+			animationsSelect.setOptions( options );
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	} );
+
+	var mixer, currentAnimation, actions = {};
+
+	var clock = new THREE.Clock();
+	function updateAnimation() {
+
+		if ( mixer !== undefined && renderer !== null ) {
+
+			var dt = clock.getDelta();
+			mixer.update( dt * speed.getValue() );
+			if ( currentAnimation !== undefined && currentAnimation.isRunning() ) {
+
+				requestAnimationFrame( updateAnimation );
+				renderer.render( editor.scene, editor.camera );
+
+			} else {
+
+				currentAnimation = undefined;
+
+			}
+
+		}
+
+	}
+
+	function playAnimation() {
+
+		currentAnimation = actions[ animationsSelect.getValue() ];
+		if ( currentAnimation !== undefined ) {
+
+			stopAnimations();
+			currentAnimation.play();
+			updateAnimation();
+
+		}
+
+	}
+
+	function stopAnimations() {
+
+		if ( mixer !== undefined ) {
+
+			mixer.stopAllAction();
+
+		}
+
+	}
 
 	var container = new UI.Panel();
 	container.setDisplay( 'none' );
 
 	container.add( new UI.Text( 'Animation' ).setTextTransform( 'uppercase' ) );
-	container.add( new UI.Break() );
-	container.add( new UI.Break() );
 
-	var animationsRow = new UI.Row();
-	container.add( animationsRow );
+	var div = new UI.Div().setMarginLeft( '90px' );
+	container.add( div );
+
+	div.add( new UI.Button( "Play" ).setFontSize( '12px' ).onClick( playAnimation ).setMarginRight( '10px' ) );
+
+	div.add( new UI.Button( "Stop" ).setFontSize( '12px' ).onClick( stopAnimations ), new UI.Break() );
+
+	var animationsSelect = new UI.Select().setFontSize( '12px' ).setMarginTop( '10px' ).setMarginBottom( '10px' );
+	div.add( animationsSelect, new UI.Break() );
+
+	var row = new UI.Row();
+	div.add( row );
+
+	var speed = new UI.Number( 1 ).setRange( 0.25, 2 ).setStep( 0.5 ).setMarginLeft( '10px' );
+	row.add( new UI.Text( "Speed" ), speed );
 
 	return container;