Переглянути джерело

Editor: Replaced now uneeded axis limiter with translate/rotate/scale buttons.

Mr.doob 12 роки тому
батько
коміт
77da0db2f5
4 змінених файлів з 33 додано та 22 видалено
  1. 9 1
      editor/index.html
  2. 18 18
      editor/js/Toolbar.js
  3. 4 2
      editor/js/Viewport.js
  4. 2 1
      editor/js/libs/ui.js

+ 9 - 1
editor/index.html

@@ -16,6 +16,14 @@
 				border-top: 1px solid #ccc;
 				border-top: 1px solid #ccc;
 			}
 			}
 
 
+			button {
+
+				position: relative;
+				left: -3px;
+				top: -3px;
+
+			}
+
 			.menubar {
 			.menubar {
 				background-color: #eee;
 				background-color: #eee;
 				padding: 0px;
 				padding: 0px;
@@ -139,7 +147,7 @@
 
 
 				// notifications
 				// notifications
 
 
-				modifierAxisChanged: new SIGNALS.Signal(),
+				transformModeChanged: new SIGNALS.Signal(),
 				snapChanged: new SIGNALS.Signal(),
 				snapChanged: new SIGNALS.Signal(),
 				rendererChanged: new SIGNALS.Signal(),
 				rendererChanged: new SIGNALS.Signal(),
 				sceneAdded: new SIGNALS.Signal(),
 				sceneAdded: new SIGNALS.Signal(),

+ 18 - 18
editor/js/Toolbar.js

@@ -8,21 +8,28 @@ var Toolbar = function ( signals ) {
 	buttons.setPadding( '7px' );
 	buttons.setPadding( '7px' );
 	container.add( buttons );
 	container.add( buttons );
 
 
-	// axis
+	// translate / rotate / scale
 
 
-	var x = new UI.Checkbox( true ).onChange( update );
-	buttons.add( x );
-	buttons.add( new UI.Text( 'x' ) );
+	var translate = new UI.Button( 'translate' ).onClick( function () {
 
 
-	var y = new UI.Checkbox( true ).setMarginLeft( '10px' ).onChange( update );
-	buttons.add( y );
-	buttons.add( new UI.Text( 'y ' ) );
+		signals.transformModeChanged.dispatch( 'translate' );
 
 
-	var z = new UI.Checkbox( true ).setMarginLeft( '10px' ).onChange( update );
-	buttons.add( z );
-	buttons.add( new UI.Text( 'z ' ) );
+	} );
+	buttons.add( translate );
 
 
-	buttons.add( new UI.Text().setWidth( '25px' ) );
+	var rotate = new UI.Button( 'rotate' ).onClick( function () {
+
+		signals.transformModeChanged.dispatch( 'rotate' );
+
+	} );
+	buttons.add( rotate );
+
+	var scale = new UI.Button( 'scale' ).onClick( function () {
+
+		signals.transformModeChanged.dispatch( 'scale' );
+
+	} );
+	buttons.add( scale );
 
 
 	// grid
 	// grid
 
 
@@ -37,13 +44,6 @@ var Toolbar = function ( signals ) {
 
 
 	function update() {
 	function update() {
 
 
-		var axis = new THREE.Vector3();
-		axis.x = x.getValue() === true ? 1 : 0;
-		axis.y = y.getValue() === true ? 1 : 0;
-		axis.z = z.getValue() === true ? 1 : 0;
-
-		signals.modifierAxisChanged.dispatch( axis );
-
 		signals.snapChanged.dispatch( snap.getValue() === true ? grid.getValue() : null );
 		signals.snapChanged.dispatch( snap.getValue() === true ? grid.getValue() : null );
 
 
 	}
 	}

+ 4 - 2
editor/js/Viewport.js

@@ -189,9 +189,11 @@ var Viewport = function ( signals ) {
 
 
 	// signals
 	// signals
 
 
-	signals.modifierAxisChanged.add( function ( axis ) {
+	signals.transformModeChanged.add( function ( mode ) {
 
 
-		transformControls.modifierAxis.copy( axis );
+		transformControls.mode = mode;
+		transformControls.updateMode();
+		render();
 
 
 	} );
 	} );
 
 

+ 2 - 1
editor/js/libs/ui.js

@@ -955,7 +955,7 @@ UI.HorizontalRule.prototype = Object.create( UI.Element.prototype );
 
 
 // Button
 // Button
 
 
-UI.Button = function () {
+UI.Button = function ( value ) {
 
 
 	UI.Element.call( this );
 	UI.Element.call( this );
 
 
@@ -965,6 +965,7 @@ UI.Button = function () {
 	dom.className = 'Button';
 	dom.className = 'Button';
 
 
 	this.dom = dom;
 	this.dom = dom;
+	this.dom.textContent = value;
 
 
 	return this;
 	return this;