Editor: added UI for changing light intensity and color.

editor/js/ui/Sidebar.Object3D.js

@@ -115,6 +115,26 @@ Sidebar.Object3D = function ( signals ) {
 
 	container.add( objectFarRow );
 
+	// intensity
+
+	var objectIntensityRow = new UI.Panel();
+	var objectIntensity = new UI.Number( 'absolute' ).setRange( 0, Infinity ).setLeft( '100px' ).onChange( update );
+
+	objectIntensityRow.add( new UI.Text().setValue( 'Intensity' ).setColor( '#666' ) );
+	objectIntensityRow.add( objectIntensity );
+
+	container.add( objectIntensityRow );
+
+
+	// color
+
+	var objectColorRow = new UI.Panel();
+	var objectColor = new UI.Color( 'absolute' ).setLeft( '100px' ).onChange( update );
+
+	objectColorRow.add( new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
+	objectColorRow.add( objectColor );
+
+	container.add( objectColorRow );
 
 	//
 
@@ -209,6 +229,18 @@ Sidebar.Object3D = function ( signals ) {
 
 			}
 
+			if ( selected.intensity !== undefined ) {
+
+				selected.intensity = objectIntensity.getValue();
+
+			}
+
+			if ( selected.color !== undefined ) {
+
+				selected.color.setHex( objectColor.getHexValue() );
+
+			}
+
 			signals.objectChanged.dispatch( selected );
 
 		}
@@ -220,7 +252,9 @@ Sidebar.Object3D = function ( signals ) {
 		var properties = {
 			'fov': objectFovRow,
 			'near': objectNearRow,
-			'far': objectFarRow
+			'far': objectFarRow,
+			'intensity': objectIntensityRow,
+			'color': objectColorRow
 		};
 
 		for ( var property in properties ) {
@@ -285,6 +319,18 @@ Sidebar.Object3D = function ( signals ) {
 
 			}
 
+			if ( object.intensity !== undefined ) {
+
+				objectIntensity.setValue( object.intensity );
+
+			}
+
+			if ( object.color !== undefined ) {
+
+				objectColor.setValue( '#' + object.color.getHexString() );
+
+			}
+
 			objectVisible.setValue( object.visible );
 
 			updateRows();
@@ -356,6 +402,18 @@ Sidebar.Object3D = function ( signals ) {
 
 		}
 
+		if ( object.intensity !== undefined ) {
+
+			objectIntensity.setValue( object.intensity );
+
+		}
+
+		if ( object.color !== undefined ) {
+
+			objectColor.setValue( '#' + object.color.getHexString() );
+
+		}
+
 		objectVisible.setValue( object.visible );
 
 	}

editor/js/ui/Viewport.js

@@ -392,9 +392,25 @@ var Viewport = function ( signals ) {
 
 		} else if ( object instanceof THREE.DirectionalLight ) {
 
+			// set gizmo arrow orientation
+			// pointing from light to target
+
 			direction.sub( object.target.position, object.position );
 			object.properties.arrow.setDirection( direction );
 
+			// set gizmo color to light color * light intensity
+
+			var lightColor = object.properties.pickingProxy.material.color;
+			lightColor.copy( object.color );
+
+			var intensity = THREE.Math.clamp( object.intensity, 0, 1 );
+			lightColor.r *= intensity;
+			lightColor.g *= intensity;
+			lightColor.b *= intensity;
+
+			object.properties.arrow.setColor( lightColor.getHex() );
+			object.target.properties.pickingProxy.material.color.copy( lightColor );
+
 		} else if ( object instanceof THREE.PointLight ) {
 		} else if ( object instanceof THREE.SpotLight ) {
 		} else if ( object instanceof THREE.HemisphereLight ) {