Browse Source

GUI: Added material emissive and shininess.

Mr.doob 13 years ago
parent
commit
8a19dff64f

+ 2 - 1
gui/js/UI.js

@@ -283,7 +283,8 @@ UI.Select = function ( position ) {
 
 
 	this.dom.addEventListener( 'change', function ( event ) {
 	this.dom.addEventListener( 'change', function ( event ) {
 
 
-		// console.log( scope.dom.selectedIndex );
+		// console.log( scope.dom.selectedIndex, scope.dom.value );
+
 		if ( scope.onChangeCallback ) scope.onChangeCallback();
 		if ( scope.onChangeCallback ) scope.onChangeCallback();
 
 
 	}, false );
 	}, false );

+ 7 - 1
gui/js/ui/Sidebar.Outliner.js

@@ -9,11 +9,17 @@ Sidebar.Outliner = function ( signals ) {
 	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
 	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 	container.add( new UI.Break(), new UI.Break() );
 
 
-	var scene = new UI.Select().setMultiple( true ).setOptions( [ 'test', 'test' ] ).setWidth( '280px' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' );
+	var scene = new UI.Select().setMultiple( true ).setOptions( [ 'test', 'test' ] ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 	container.add( scene );
 	container.add( scene );
 
 
 	container.add( new UI.Break(), new UI.Break() );
 	container.add( new UI.Break(), new UI.Break() );
 
 
+	function update() {
+
+		console.log( scene.getValue() );
+
+	}
+
 	return container;
 	return container;
 
 
 }
 }

+ 48 - 2
gui/js/ui/Sidebar.Properties.Material.js

@@ -63,6 +63,16 @@ Sidebar.Properties.Material = function ( signals ) {
 
 
 	container.add( materialAmbientRow );
 	container.add( materialAmbientRow );
 
 
+	// emissive
+
+	var materialEmissiveRow = new UI.Panel();
+	var materialEmissive = new UI.Color( 'absolute' ).setLeft( '90px' ).onChange( update );
+
+	materialEmissiveRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Emissive' ).setColor( '#666' ) );
+	materialEmissiveRow.add( materialEmissive );
+
+	container.add( materialEmissiveRow );
+
 	// specular
 	// specular
 
 
 	var materialSpecularRow = new UI.Panel();
 	var materialSpecularRow = new UI.Panel();
@@ -73,6 +83,16 @@ Sidebar.Properties.Material = function ( signals ) {
 
 
 	container.add( materialSpecularRow );
 	container.add( materialSpecularRow );
 
 
+	// shininess
+
+	var materialShininessRow = new UI.Panel();
+	var materialShininess = new UI.Number( 'absolute' ).setValue( 30 ).setLeft( '90px' ).onChange( update );
+
+	materialShininessRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Shininess' ).setColor( '#666' ) );
+	materialShininessRow.add( materialShininess );
+
+	container.add( materialShininessRow );
+
 	// map
 	// map
 
 
 	var materialMapRow = new UI.Panel();
 	var materialMapRow = new UI.Panel();
@@ -81,7 +101,7 @@ Sidebar.Properties.Material = function ( signals ) {
 	materialMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
 	materialMapRow.add( new UI.HorizontalRule(), new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
 	materialMapRow.add( materialMap );
 	materialMapRow.add( materialMap );
 
 
-	container.add( materialSpecularRow );
+	container.add( materialMapRow );
 
 
 	// opacity
 	// opacity
 
 
@@ -137,7 +157,7 @@ Sidebar.Properties.Material = function ( signals ) {
 
 
 			if ( material instanceof materials[ materialClass.getValue() ] == false ) {
 			if ( material instanceof materials[ materialClass.getValue() ] == false ) {
 
 
-				material = new materials[ materialClass.getValue() ];
+				material = new materials[ materialClass.getValue() ]();
 				selected.material = material;
 				selected.material = material;
 
 
 			}
 			}
@@ -154,12 +174,24 @@ Sidebar.Properties.Material = function ( signals ) {
 
 
 			}
 			}
 
 
+			if ( material.emissive !== undefined ) {
+
+				material.emissive.setHex( parseInt( materialEmissive.getValue().substr( 1 ), 16 ) );
+
+			}
+
 			if ( material.specular !== undefined ) {
 			if ( material.specular !== undefined ) {
 
 
 				material.specular.setHex( parseInt( materialSpecular.getValue().substr( 1 ), 16 ) );
 				material.specular.setHex( parseInt( materialSpecular.getValue().substr( 1 ), 16 ) );
 
 
 			}
 			}
 
 
+			if ( material.shininess !== undefined ) {
+
+				material.shininess = materialShininess.getValue();
+
+			}
+
 			if ( material.opacity !== undefined ) {
 			if ( material.opacity !== undefined ) {
 
 
 				material.opacity = materialOpacity.getValue();
 				material.opacity = materialOpacity.getValue();
@@ -198,7 +230,9 @@ Sidebar.Properties.Material = function ( signals ) {
 
 
 		materialColorRow.setDisplay( material.color !== undefined ? '' : 'none' );
 		materialColorRow.setDisplay( material.color !== undefined ? '' : 'none' );
 		materialAmbientRow.setDisplay( material.ambient !== undefined ? '' : 'none' );
 		materialAmbientRow.setDisplay( material.ambient !== undefined ? '' : 'none' );
+		materialEmissiveRow.setDisplay( material.emissive !== undefined ? '' : 'none' );
 		materialSpecularRow.setDisplay( material.specular !== undefined ? '' : 'none' );
 		materialSpecularRow.setDisplay( material.specular !== undefined ? '' : 'none' );
+		materialShininessRow.setDisplay( material.shininess !== undefined ? '' : 'none' );
 		materialMapRow.setDisplay( material.map !== undefined ? '' : 'none' );
 		materialMapRow.setDisplay( material.map !== undefined ? '' : 'none' );
 		materialOpacityRow.setDisplay( material.opacity !== undefined ? '' : 'none' );
 		materialOpacityRow.setDisplay( material.opacity !== undefined ? '' : 'none' );
 		materialTransparentRow.setDisplay( material.transparent !== undefined ? '' : 'none' );
 		materialTransparentRow.setDisplay( material.transparent !== undefined ? '' : 'none' );
@@ -232,12 +266,24 @@ Sidebar.Properties.Material = function ( signals ) {
 
 
 			}
 			}
 
 
+			if ( material.emissive !== undefined ) {
+
+				materialEmissive.setValue( '#' + material.emissive.getHex().toString( 16 ) );
+
+			}
+
 			if ( material.specular !== undefined ) {
 			if ( material.specular !== undefined ) {
 
 
 				materialSpecular.setValue( '#' + material.specular.getHex().toString( 16 ) );
 				materialSpecular.setValue( '#' + material.specular.getHex().toString( 16 ) );
 
 
 			}
 			}
 
 
+			if ( material.shininess !== undefined ) {
+
+				materialShininess.setValue( material.shininess );
+
+			}
+
 			if ( material.map !== undefined ) {
 			if ( material.map !== undefined ) {
 
 
 				materialMap.setValue( material.map );
 				materialMap.setValue( material.map );

+ 1 - 1
gui/js/ui/Viewport.js

@@ -86,7 +86,7 @@ var Viewport = function ( signals ) {
 		projector.unprojectVector( vector, camera );
 		projector.unprojectVector( vector, camera );
 
 
 		var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
 		var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
-		var intersects = ray.intersectObjects( objects );
+		var intersects = ray.intersectObjects( objects, true );
 
 
 		if ( intersects.length ) {
 		if ( intersects.length ) {
 
 

+ 7 - 7
src/core/Ray.js

@@ -243,13 +243,13 @@
 	//
 	//
 
 
 	THREE.Ray.prototype.precision = 0.0001;
 	THREE.Ray.prototype.precision = 0.0001;
-    
-    THREE.Ray.prototype.set = function ( origin, direction ) {
-        
-        this.origin = origin;
-        this.direction = direction;
-        
-    };
+
+	THREE.Ray.prototype.set = function ( origin, direction ) {
+
+		this.origin = origin;
+		this.direction = direction;
+
+	};
 
 
 	THREE.Ray.prototype.intersectObject = function ( object, recursive ) {
 	THREE.Ray.prototype.intersectObject = function ( object, recursive ) {