Editor: Added toolbar.

editor/index.html

@@ -54,6 +54,10 @@
 								background-color: #08f;
 							}
 
+			.toolbar {
+				background-color: #999;
+			}
+
 			.sidebar {
 				width: 300px;
 				background-color: #eee;
@@ -112,6 +116,7 @@
 		<script src="js/ui/Sidebar.Geometry.TorusGeometry.js"></script>
 		<script src="js/ui/Sidebar.Geometry.TorusKnotGeometry.js"></script>
 		<script src="js/ui/Sidebar.Material.js"></script>
+		<script src="js/ui/Toolbar.js"></script>
 		<script src="js/ui/Viewport.js"></script>
 
 		<script>
@@ -132,6 +137,7 @@
 
 				// notifications
 
+				modifierAxisChanged: new SIGNALS.Signal(),
 				rendererChanged: new SIGNALS.Signal(),
 				sceneChanged: new SIGNALS.Signal(),
 				objectAdded: new SIGNALS.Signal(),
@@ -153,9 +159,16 @@
 			viewport.setTop( '32px' );
 			viewport.setLeft( '0px' );
 			viewport.setRight( '300px' );
-			viewport.setBottom( '0px' );
+			viewport.setBottom( '32px' );
 			document.body.appendChild( viewport.dom );
 
+			var toolbar = new Toolbar( signals );
+			toolbar.setBottom( '0px' );
+			toolbar.setLeft( '0px' );
+			toolbar.setRight( '300px' );
+			toolbar.setHeight( '32px' );
+			document.body.appendChild( toolbar.dom );
+
 			var menubar = new Menubar( signals );
 			menubar.setWidth( '100%' );
 			menubar.setHeight( '32px' );

editor/js/ui/Toolbar.js

@@ -0,0 +1,36 @@
+var Toolbar = function ( signals ) {
+
+	var container = new UI.Panel();
+	container.setPosition( 'absolute' );
+	container.setClass( 'toolbar' );
+
+	var buttons = new UI.Panel();
+	buttons.setPadding( '7px' );
+	container.add( buttons );
+
+	var x = new UI.Checkbox( true ).onChange( update );
+	buttons.add( x );
+	buttons.add( new UI.Text( 'x' ) );
+
+	var y = new UI.Checkbox( true ).setMarginLeft( '10px' ).onChange( update );
+	buttons.add( y );
+	buttons.add( new UI.Text( 'y ' ) );
+
+	var z = new UI.Checkbox( true ).setMarginLeft( '10px' ).onChange( update );
+	buttons.add( z );
+	buttons.add( new UI.Text( 'z ' ) );
+
+	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 );
+
+	}
+
+	return container;
+
+}

editor/js/ui/Viewport.js

@@ -16,6 +16,8 @@ var Viewport = function ( signals ) {
 	var grid = new THREE.GridHelper( 500, 25 );
 	sceneHelpers.add( grid );
 
+	var modifierAxis = new THREE.Vector3( 1, 1, 1 );
+
 	var selectionBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true, fog: false } ) );
 	selectionBox.matrixAutoUpdate = false;
 	selectionBox.visible = false;
@@ -46,7 +48,7 @@ var Viewport = function ( signals ) {
 
 	// object picking
 
-	var intersectionPlane = new THREE.Mesh( new THREE.PlaneGeometry( 10000, 10000, 8, 8 ) );
+	var intersectionPlane = new THREE.Mesh( new THREE.PlaneGeometry( 5000, 5000, 8, 8 ) );
 	intersectionPlane.visible = false;
 	sceneHelpers.add( intersectionPlane );
 
@@ -134,9 +136,12 @@ var Viewport = function ( signals ) {
 
 		if ( intersects.length > 0 ) {
 
-			intersects[ 0 ].point.sub( offset );
+			var point = intersects[ 0 ].point.sub( offset );
+
+			selected.position.x = modifierAxis.x === 1 ? point.x : intersectionPlane.position.x;
+			selected.position.y = modifierAxis.y === 1 ? point.y : intersectionPlane.position.y;
+			selected.position.z = modifierAxis.z === 1 ? point.z : intersectionPlane.position.z;
 
-			selected.position.copy( intersects[ 0 ].point );
 			signals.objectChanged.dispatch( selected );
 
 			render();
@@ -236,6 +241,12 @@ var Viewport = function ( signals ) {
 
 	// signals
 
+	signals.modifierAxisChanged.add( function ( axis ) {
+
+		modifierAxis.copy( axis );
+
+	} );
+
 	signals.rendererChanged.add( function ( object ) {
 
 		container.dom.removeChild( renderer.domElement );