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,10 @@ Editor.prototype = {
 
 	},
 
+	addAnimation: function(result) {
+		this.animations[result.scene.uuid] = result.animations;
+	},
+
 	//
 
 	addHelper: function () {

editor/js/Loader.js

@@ -216,6 +216,7 @@ var Loader = function ( editor ) {
 					loader.parse( contents, '', function ( result ) {
 
 						result.scene.name = filename;
+						editor.addAnimation(result);
 						editor.execute( new AddObjectCommand( result.scene ) );
 
 					} );
@@ -246,6 +247,7 @@ var Loader = function ( editor ) {
 					loader.parse( contents, '', function ( result ) {
 
 						result.scene.name = filename;
+						editor.addAnimation(result);
 						editor.execute( new AddObjectCommand( result.scene ) );
 
 					} );
@@ -678,6 +680,7 @@ var Loader = function ( editor ) {
 					var loader = new THREE.GLTFLoader();
 					loader.parse( file.asArrayBuffer(), '', function ( result ) {
 
+						editor.addAnimation(result);
 						editor.execute( new AddObjectCommand( result.scene ) );
 
 					} );
@@ -689,6 +692,7 @@ var Loader = function ( editor ) {
 					var loader = new THREE.GLTFLoader( manager );
 					loader.parse( file.asText(), '', function ( result ) {
 
+						editor.addAnimation(result);
 						editor.execute( new AddObjectCommand( result.scene ) );
 
 					} );

editor/js/Sidebar.Animation.js

@@ -6,18 +6,87 @@ 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);
+			if(currentAnimation !== undefined && currentAnimation.isRunning())
+			{
+				requestAnimationFrame(updateAnimation);
+				renderer.render(editor.scene, editor.camera);
+			}
+			else
+			{
+				currentAnimation = undefined;
+			}
+		}
+	}
+
+	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("Stop").setFontSize('12px').onClick(stopAnimations), new UI.Break());
+
+	var animationsSelect = new UI.Select().setFontSize('12px').setMarginTop('10px').onChange(function()
+	{
+		currentAnimation = actions[animationsSelect.getValue()];
+		if(currentAnimation !== undefined)
+		{
+			stopAnimations();
+			currentAnimation.play();
+			updateAnimation();
+		}
+	});
+	div.add( animationsSelect );
 
 	return container;