Browse Source

Merge branch 'sidebaranimation2' of git://github.com/gero3/three.js into dev

Mr.doob 12 years ago
parent
commit
cacf810afc
4 changed files with 87 additions and 0 deletions
  1. 2 0
      editor/index.html
  2. 67 0
      editor/js/Sidebar.Animation.js
  3. 1 0
      editor/js/Sidebar.js
  4. 17 0
      editor/js/Viewport.js

+ 2 - 0
editor/index.html

@@ -122,6 +122,7 @@
 		<script src="js/Sidebar.Scene.js"></script>
 		<script src="js/Sidebar.Object3D.js"></script>
 		<script src="js/Sidebar.Geometry.js"></script>
+		<script src="js/Sidebar.Animation.js"></script>
 		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CubeGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
@@ -146,6 +147,7 @@
 
 				cloneSelectedObject: new SIGNALS.Signal(),
 				removeSelectedObject: new SIGNALS.Signal(),
+				playAnimations: new SIGNALS.Signal(),
 
 				// notifications
 

+ 67 - 0
editor/js/Sidebar.Animation.js

@@ -0,0 +1,67 @@
+Sidebar.Animation = function ( signals ) {
+
+	var options = {};
+	var possibleAnimations = {};
+
+	var container = new UI.Panel();
+	container.setPadding( '10px' );
+	container.setBorderTop( '1px solid #ccc' );
+
+	container.add( new UI.Text( 'Animation' ).setColor( '#666' ) );
+	container.add( new UI.Break(), new UI.Break() );
+
+	var AnimationsRow = new UI.Panel();
+	var Animations = new UI.Select().setOptions( options ).setWidth( '130px' ).setColor( '#444' ).setFontSize( '12px' );
+	AnimationsRow.add( new UI.Text( 'animations' ).setWidth( '90px' ).setColor( '#666' ) );
+	AnimationsRow.add( Animations );
+	container.add( AnimationsRow );
+	container.add( new UI.Break() );
+		
+	var PlayRow = new UI.Panel();
+	var playButton = new UI.Button().setLabel("Play").onClick(play);
+	PlayRow.add( playButton );
+	container.add( PlayRow );
+	container.add( new UI.Break() );
+	
+	function play(){
+		
+		var value = Animations.getValue();
+		if (possibleAnimations[value]){
+			var anims = possibleAnimations[value]
+			for ( var i = 0;i < anims.length;i++){
+				anims[i].play();
+			}
+			signals.playAnimations.dispatch( anims );
+		};
+	}
+	
+	
+	signals.objectAdded.add( function ( object ) {
+
+		console.log(object)
+		if (object instanceof THREE.Mesh){
+			if (object.geometry && object.geometry.animation){
+				var name = object.geometry.animation.name;
+				options[name] = name
+				Animations.setOptions(options);
+				
+				THREE.AnimationHandler.add(object.geometry.animation);
+				var animation = new THREE.Animation(object, 
+     				name, 
+     				THREE.AnimationHandler.CATMULLROM)
+				
+				if (possibleAnimations[name]){
+					possibleAnimations[name].push(animation);
+				} else {
+					possibleAnimations[name] = [animation];
+				}
+				
+			}
+		}
+
+	} );
+	
+
+	return container;
+
+}

+ 1 - 0
editor/js/Sidebar.js

@@ -9,6 +9,7 @@ var Sidebar = function ( signals ) {
 	container.add( new Sidebar.Object3D( signals ) );
 	container.add( new Sidebar.Geometry( signals ) );
 	container.add( new Sidebar.Material( signals ) );
+	container.add( new Sidebar.Animation( signals ) );
 
 	return container;
 

+ 17 - 0
editor/js/Viewport.js

@@ -491,6 +491,23 @@ var Viewport = function ( signals ) {
 
 	} );
 
+	signals.playAnimations.add( function (animations) {
+		
+		function animate() {
+			requestAnimationFrame( animate );
+			
+			for (var i = 0; i < animations.length ; i++ ){
+				animations[i].update(0.016);
+			} 
+
+
+			render();
+		}
+
+		animate();
+
+	} );
+
 	//
 
 	var renderer;