GUI: Adding selection box. Wiring panel properties.

mrdoob · May 21, 2012 · 498c106 · 498c106
1 parent 56d94a5
commit 498c106
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 30 deletions.
diff --git a/gui/index.html b/gui/index.html
@@ -29,32 +29,44 @@
 
 		<script>
 
-			var events = {
+			var SIGNALS = signals;
 
-				windowResize: new signals.Signal()
+			var signals = {
+
+				objectAdded: new SIGNALS.Signal(),
+				objectSelected: new SIGNALS.Signal(),
+				windowResize: new SIGNALS.Signal()
 
 			};
 
 			//
 
-			var viewport = new Viewport( events );
+			var viewport = new Viewport( signals );
 			viewport.setWidth( '-webkit-calc(100% - 300px)' );
 			viewport.setWidth( '-moz-calc(100% - 300px)' );
 			viewport.setWidth( 'calc(100% - 300px)' );
 			viewport.setHeight( '100%' );
 			document.body.appendChild( viewport.dom );
 
-			var panel = new Panel( events );
+			var panel = new Panel( signals );
 			panel.setX( '-webkit-calc(100% - 300px)' );
 			panel.setX( '-moz-calc(100% - 300px)' );
 			panel.setX( 'calc(100% - 300px)' );
 			document.body.appendChild( panel.dom );
 
-			//			
+			//
+
+			var geometry = new THREE.SphereGeometry( 75, 25, 15 );
+			var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } );
+			var mesh = new THREE.Mesh( geometry, material );
+
+			signals.objectAdded.dispatch( mesh );
+
+			//
 
 			var onWindowResize = function ( event ) {
 
-				events.windowResize.dispatch();
+				signals.windowResize.dispatch();
 
 			};
 

diff --git a/gui/js/UI.js b/gui/js/UI.js
@@ -160,9 +160,14 @@ UI.Panel = function ( position ) {
 UI.Panel.prototype = new UI.Element();
 UI.Panel.prototype.constructor = UI.Panel;
 
-UI.Panel.prototype.add = function ( node ) {
+UI.Panel.prototype.add = function () {
+
+	for ( var i = 0; i < arguments.length; i ++ ) {
+
+		this.dom.appendChild( arguments[ i ].dom );
+
+	}
 
-	this.dom.appendChild( node.dom );
 	return this;
 
 };

diff --git a/gui/js/ui/Panel.js b/gui/js/ui/Panel.js
@@ -4,6 +4,7 @@ var Panel = function ( signals ) {
 	container.setWidth( '300px' ).setHeight( '100%' );
 	container.setBackgroundColor( '#eee' );
 
+	var selected = null;
 
 	// Properties
 
@@ -16,29 +17,62 @@ var Panel = function ( signals ) {
 	properties.add( new UI.Break() );
 
 	properties.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setX( '90px' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setX( '160px' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setX( '230px' ) );
+
+	var positionX = new UI.FloatNumber( 'absolute' ).setX( '90px' );
+	var positionY = new UI.FloatNumber( 'absolute' ).setX( '160px' );
+	var positionZ = new UI.FloatNumber( 'absolute' ).setX( '230px' );
+
+	properties.add( positionX, positionY, positionZ );
 
 	properties.add( new UI.HorizontalRule() );
 
 	properties.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setX( '90px' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setX( '160px' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setX( '230px' ) );
+
+	var rotationX = new UI.FloatNumber( 'absolute' ).setX( '90px' );
+	var rotationY = new UI.FloatNumber( 'absolute' ).setX( '160px' );
+	var rotationZ = new UI.FloatNumber( 'absolute' ).setX( '230px' );
+
+	properties.add( rotationX, rotationY, rotationZ );
 
 	properties.add( new UI.HorizontalRule() );
 
 	properties.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '90px' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '160px' ) );
-	properties.add( new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '230px' ) );
+
+	var scaleX = new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '90px' );
+	var scaleY = new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '160px' );
+	var scaleZ = new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '230px' );
+
+	properties.add( scaleX, scaleY, scaleZ );
 
 	properties.add( new UI.Break() );
 	properties.add( new UI.Break() );
 
 	container.add( properties );
 
+	//
+
+	signals.objectSelected.add( function ( object ) {
+
+		selected = object;
+
+		if ( object ) {
+
+			positionX.setNumber( object.position.x );
+			positionY.setNumber( object.position.y );
+			positionZ.setNumber( object.position.z );
+
+			rotationX.setNumber( object.rotation.x );
+			rotationY.setNumber( object.rotation.y );
+			rotationZ.setNumber( object.rotation.z );
+
+			scaleX.setNumber( object.scale.x );
+			scaleY.setNumber( object.scale.y );
+			scaleZ.setNumber( object.scale.z );
+
+		}
+
+	} );
+
 
 	// Geometry
 

diff --git a/gui/js/ui/Viewport.js b/gui/js/ui/Viewport.js
@@ -29,6 +29,10 @@ var Viewport = function ( signals ) {
 	var grid = new THREE.Line( geometry, material, THREE.LinePieces );
 	sceneHelpers.add( grid );
 
+	var selectionBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), new THREE.MeshBasicMaterial( { color: 0xffff00, wireframe: true } ) );
+	selectionBox.visible = false;
+	sceneHelpers.add( selectionBox );
+
 	//
 
 	var scene = new THREE.Scene();
@@ -48,12 +52,88 @@ var Viewport = function ( signals ) {
 	controls.dynamicDampingFactor = 0.3;
 	controls.addEventListener( 'change', render );
 
+	// object picking
+
+	var projector = new THREE.Projector();
+
+	container.dom.addEventListener( 'mousedown', function ( event ) {
+
+		event.preventDefault();
+
+		var vector = new THREE.Vector3( ( event.clientX / container.dom.offsetWidth ) * 2 - 1, - ( event.clientY / container.dom.offsetHeght ) * 2 + 1, 0.5 );
+		projector.unprojectVector( vector, camera );
+
+		var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
+		var intersects = ray.intersectObjects( scene.children );
+
+		if ( intersects.length ) {
+
+			signals.objectSelected.dispatch( intersects[ 0 ].object );
+
+			// controls.enabled = false;
+
+		} else {
+
+			signals.objectSelected.dispatch( null );
+
+		}
+
+	}, false );
+
+	// events
+
+	signals.objectAdded.add( function ( object ) {
+
+		scene.add( object );
+		render();
+
+	} );
+
+	signals.objectSelected.add( function ( object ) {
+
+		if ( object === null ) {
+
+			selectionBox.visible = false;
+
+		} else {
+
+			var geometry = object.geometry;
+
+			if ( geometry.boundingBox === null ) {
+
+				geometry.computeBoundingBox();
+
+			}
+
+			selectionBox.scale.x = geometry.boundingBox.max.x - geometry.boundingBox.min.x;
+			selectionBox.scale.y = geometry.boundingBox.max.y - geometry.boundingBox.min.y;
+			selectionBox.scale.z = geometry.boundingBox.max.z - geometry.boundingBox.min.z;
+
+			selectionBox.visible = true;
+
+		}
+
+		render();
+
+	} );
+
+	signals.windowResize.add( function () {
+
+		camera.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
+		camera.updateProjectionMatrix();
+
+		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
+
+		render();
+
+	} );
+
+	//
+
 	var renderer = new THREE.WebGLRenderer( { antialias: true } );
 	renderer.autoClear = false;
 	container.dom.appendChild( renderer.domElement );
 
-	signals.windowResize.add( update );
-
 	animate();
 
 	//
@@ -73,17 +153,6 @@ var Viewport = function ( signals ) {
 
 	}
 
-	function update() {
-
-		camera.aspect = container.dom.offsetWidth / container.dom.offsetHeight;
-		camera.updateProjectionMatrix();
-
-		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
-
-		render();
-
-	}
-
 	return container;
 
 }