Editor: More work on lights and helpers.

editor/js/ui/Menubar.Add.js

@@ -202,7 +202,7 @@ Menubar.Add = function ( signals ) {
 		var distance = 0;
 
 		var light = new THREE.PointLight( color, intensity, distance );
-		light.name = 'Light ' + light.id;
+		light.name = 'PointLight ' + light.id;
 
 		signals.objectAdded.dispatch( light );
 
@@ -223,8 +223,8 @@ Menubar.Add = function ( signals ) {
 		var exponent = 10;
 
 		var light = new THREE.SpotLight( color, intensity, distance, angle, exponent );
-		light.name = 'Light ' + light.id;
-		light.target.name = 'Light ' + light.id + ' target';
+		light.name = 'SpotLight ' + light.id;
+		light.target.name = 'SpotLight ' + light.id + ' target';
 
 		light.target.userData.targetInverse = light;
 
@@ -246,8 +246,8 @@ Menubar.Add = function ( signals ) {
 		var intensity = 1;
 
 		var light = new THREE.DirectionalLight( color, intensity );
-		light.name = 'Light ' + light.id;
-		light.target.name = 'Light ' + light.id + ' target';
+		light.name = 'DirectionalLight ' + light.id;
+		light.target.name = 'DirectionalLight ' + light.id + ' target';
 
 		light.target.userData.targetInverse = light;
 
@@ -270,7 +270,7 @@ Menubar.Add = function ( signals ) {
 		var intensity = 1;
 
 		var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
-		light.name = 'Light ' + light.id;
+		light.name = 'HemisphereLight ' + light.id;
 
 		light.position.set( 1, 1, 1 ).multiplyScalar( 200 );
 
@@ -289,7 +289,7 @@ Menubar.Add = function ( signals ) {
 		var color = 0x222222;
 
 		var light = new THREE.AmbientLight( color );
-		light.name = 'Light ' + light.id;
+		light.name = 'AmbientLight ' + light.id;
 
 		signals.objectAdded.dispatch( light );
 

editor/js/ui/Viewport.js

@@ -234,88 +234,80 @@ var Viewport = function ( signals ) {
 
 	} );
 
-	var handleAddition = function ( object ) {
+	// signals
 
-		// create helpers for invisible object types (lights, cameras, targets)
+	signals.rendererChanged.add( function ( object ) {
 
-		if ( object instanceof THREE.PointLight ) {
+		container.dom.removeChild( renderer.domElement );
 
-			var helper = new THREE.PointLightHelper( object, 10 );
+		renderer = object;
+		renderer.autoClear = false;
+		renderer.autoUpdateScene = false;
+		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
 
-			sceneHelpers.add( helper );
-			objects.push( helper );
+		container.dom.appendChild( renderer.domElement );
 
-			objectsToHelpers[ object.id ] = helper;
-			helpersToObjects[ helper.id ] = object;
+		render();
 
-		} else if ( object instanceof THREE.DirectionalLight ) {
+	} );
 
-			var helper = new THREE.DirectionalLightHelper( object, 10 );
-			sceneHelpers.add( helper.lightSphere );
-			sceneHelpers.add( helper.targetLine );
+	signals.objectAdded.add( function ( object ) {
 
-			objectsToHelpers[ object.id ] = helper.lightSphere;
-			helpersToObjects[ helper.lightSphere.id ] = object;
+		// handle children
 
-			objects.push( helper.lightSphere );
-			objects.push( helper.targetLine );
+		object.traverse( function ( object ) {
 
-		} else if ( object instanceof THREE.SpotLight ) {
+			// create helpers for invisible object types (lights, cameras, targets)
 
-			var sphereSize = 5;
+			if ( object instanceof THREE.PointLight ) {
 
-			var helper = new THREE.SpotLightHelper( object, sphereSize );
-			sceneHelpers.add( helper );
-			sceneHelpers.add( helper.targetSphere );
-			sceneHelpers.add( helper.targetLine );
+				var helper = new THREE.PointLightHelper( object, 10 );
+				sceneHelpers.add( helper );
 
-			objects.push( helper.lightSphere );
-			objects.push( helper.targetSphere );
-			objects.push( helper.targetLine );
+				objectsToHelpers[ object.id ] = helper;
+				helpersToObjects[ helper.lightSphere.id ] = object;
 
-		} else if ( object instanceof THREE.HemisphereLight ) {
+				objects.push( helper.lightSphere );
 
-			var sphereSize = 5;
-			var arrowLength = 30;
+			} else if ( object instanceof THREE.DirectionalLight ) {
 
-			var helper = new THREE.HemisphereLightHelper( object, sphereSize, arrowLength );
-			sceneHelpers.add( helper );
+				var helper = new THREE.DirectionalLightHelper( object, 10 );
+				sceneHelpers.add( helper );
 
-			objects.push( helper.lightSphere );
+				objectsToHelpers[ object.id ] = helper;
+				helpersToObjects[ helper.lightSphere.id ] = object;
 
-		} else {
+				objects.push( helper.lightSphere );
 
-			// add to picking list
+			} else if ( object instanceof THREE.SpotLight ) {
 
-			objects.push( object );
+				var helper = new THREE.SpotLightHelper( object, 5 );
+				sceneHelpers.add( helper );
 
-		}
+				objects.push( helper.lightSphere );
+				objects.push( helper.targetSphere );
 
-	};
+			} else if ( object instanceof THREE.HemisphereLight ) {
 
+				var helper = new THREE.HemisphereLightHelper( object, 5, 30 );
+				sceneHelpers.add( helper );
 
-	// signals
+				objects.push( helper.lightSphere );
 
-	signals.rendererChanged.add( function ( object ) {
-
-		container.dom.removeChild( renderer.domElement );
+			} else {
 
-		renderer = object;
-		renderer.autoClear = false;
-		renderer.autoUpdateScene = false;
-		renderer.setSize( container.dom.offsetWidth, container.dom.offsetHeight );
+				// add to picking list
 
-		container.dom.appendChild( renderer.domElement );
+				objects.push( object );
 
-		render();
-
-	} );
+			}
 
-	signals.objectAdded.add( function ( object ) {
+		} );
 
-		object.traverse( handleAddition );
 		scene.add( object );
 
+		// TODO: Add support for hierarchies with lights
+
 		if ( object instanceof THREE.Light )  {
 
 			updateMaterials( scene );
@@ -333,7 +325,10 @@ var Viewport = function ( signals ) {
 
 			object.updateProjectionMatrix();
 
-		} else if ( object instanceof THREE.PointLight || object instanceof THREE.DirectionalLight || object instanceof THREE.HemisphereLight || object instanceof THREE.SpotLight ) {
+		} else if ( object instanceof THREE.PointLight ||
+			    object instanceof THREE.DirectionalLight ||
+			    object instanceof THREE.HemisphereLight ||
+			    object instanceof THREE.SpotLight ) {
 
 			objectsToHelpers[ object.id ].update();
 

src/extras/helpers/DirectionalLightHelper.js

@@ -1,7 +1,6 @@
 /**
  * @author alteredq / http://alteredqualia.com/
- *
- *	- shows directional light color, intensity, position, orientation and target
+ * @author mrdoob / http://mrdoob.com/
  */
 
 THREE.DirectionalLightHelper = function ( light, sphereSize ) {
@@ -10,67 +9,39 @@ THREE.DirectionalLightHelper = function ( light, sphereSize ) {
 
 	this.light = light;
 
-	// position
-
-	this.position = light.position;
-
-	// direction
-
-	this.direction = new THREE.Vector3();
-	this.direction.subVectors( light.target.position, light.position );
-
-	// color
-
-	var intensity = THREE.Math.clamp( light.intensity, 0, 1 );
-
-	this.color = light.color.clone();
-	this.color.multiplyScalar( intensity );
-
-	var hexColor = this.color.getHex();
+	//
 
-	// light helper
+	var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
+	var material = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
+	material.color.copy( light.color ).multiplyScalar( light.intensity );
 
-	var bulbGeometry = new THREE.SphereGeometry( sphereSize, 16, 8 );
-	var bulbMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false } );
+	this.lightSphere = new THREE.Mesh( geometry, material );
+	this.lightSphere.position.copy( this.light.position );
+	this.add( this.lightSphere );
 
-	this.lightSphere = new THREE.Mesh( bulbGeometry, bulbMaterial );
+	var lineGeometry = new THREE.Geometry();
+	lineGeometry.vertices.push( this.light.position.clone() );
+	lineGeometry.vertices.push( new THREE.Vector3() );
+	lineGeometry.computeLineDistances();
 
-	this.add( this.lightSphere );
+	var lineMaterial = new THREE.LineDashedMaterial( { dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true, fog: false } );
+	lineMaterial.color.copy( material.color );
 
-	this.lightSphere.userData.isGizmo = true;
-	this.lightSphere.userData.gizmoSubject = light;
-	this.lightSphere.userData.gizmoRoot = this;
+	this.targetLine = new THREE.Line( lineGeometry, lineMaterial );
+	this.add( this.targetLine );
 
+	/*
 	// light target helper
 
 	this.targetSphere = null;
 
 	if ( light.target.userData.targetInverse !== undefined ) {
 
-		var targetGeo = new THREE.SphereGeometry( sphereSize, 8, 4 );
-		var targetMaterial = new THREE.MeshBasicMaterial( { color: hexColor, wireframe: true, fog: false } );
-
-		this.targetSphere = new THREE.Mesh( targetGeo, targetMaterial );
+		this.targetSphere = new THREE.Mesh( geometry, material );
 		this.targetSphere.position = light.target.position;
 
-		this.targetSphere.userData.isGizmo = true;
-		this.targetSphere.userData.gizmoSubject = light.target;
-		this.targetSphere.userData.gizmoRoot = this.targetSphere;
-
-		var lineMaterial = new THREE.LineDashedMaterial( { color: hexColor, dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true, fog: false } );
-		var lineGeometry = new THREE.Geometry();
-		lineGeometry.vertices.push( this.position.clone() );
-		lineGeometry.vertices.push( this.targetSphere.position.clone() );
-		lineGeometry.computeLineDistances();
-
-		this.targetLine = new THREE.Line( lineGeometry, lineMaterial );
-		this.targetLine.userData.isGizmo = true;
-
 	}
-
-	//
-
-	this.userData.isGizmo = true;
+	*/
 
 }
 
@@ -78,35 +49,23 @@ THREE.DirectionalLightHelper.prototype = Object.create( THREE.Object3D.prototype
 
 THREE.DirectionalLightHelper.prototype.update = function () {
 
-	// update arrow orientation
-	// pointing from light to target
-
-	this.direction.subVectors( this.light.target.position, this.light.position );
-
-	// update arrow, spheres and line colors to light color * light intensity
+	this.lightSphere.position.copy( this.light.position );
+	this.lightSphere.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
-	var intensity = THREE.Math.clamp( this.light.intensity, 0, 1 );
-
-	this.color.copy( this.light.color );
-	this.color.multiplyScalar( intensity );
-
-	this.lightSphere.material.color.copy( this.color );
+	this.targetLine.geometry.vertices[ 0 ].copy( this.light.position );
+	this.targetLine.geometry.computeLineDistances();
+	this.targetLine.geometry.verticesNeedUpdate = true;
+	this.targetLine.material.color.copy( this.lightSphere.material.color );
 
+	/*
 	// Only update targetSphere and targetLine if available
+
 	if ( this.targetSphere !== null ) {
 
 		this.targetSphere.material.color.copy( this.color );
-		this.targetLine.material.color.copy( this.color );
-
-		// update target line vertices
-
-		this.targetLine.geometry.vertices[ 0 ].copy( this.light.position );
-		this.targetLine.geometry.vertices[ 1 ].copy( this.light.target.position );
-
-		this.targetLine.geometry.computeLineDistances();
-		this.targetLine.geometry.verticesNeedUpdate = true;
 
 	}
+	*/
 
 }
 

src/extras/helpers/PointLightHelper.js

@@ -5,9 +5,19 @@
 
 THREE.PointLightHelper = function ( light, sphereSize ) {
 
-	/*
-	// light helper
+	THREE.Object3D.call( this );
+
+	this.light = light;
+
+	var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
+	var material = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
+	material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+
+	this.lightSphere = new THREE.Mesh( geometry, material );
+	this.lightSphere.position.copy( this.light.position );
+	this.add( this.lightSphere );
 
+	/*
 	var distanceGeometry = new THREE.IcosahedronGeometry( 1, 2 );
 	var distanceMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false, wireframe: true, opacity: 0.1, transparent: true } );
 
@@ -26,27 +36,17 @@ THREE.PointLightHelper = function ( light, sphereSize ) {
 
 	}
 
-	this.add( this.lightSphere );
-	this.add( this.lightRays );
 	this.add( this.lightDistance );
 	*/
 
-	var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
-	var material = new THREE.MeshBasicMaterial( { color: light.color.getHex(), fog: false, wireframe: true } );
-
-	THREE.Mesh.call( this, geometry, material );
-
-	this.light = light;
-	this.position = light.position;
-
 }
 
-THREE.PointLightHelper.prototype = Object.create( THREE.Mesh.prototype );
+THREE.PointLightHelper.prototype = Object.create( THREE.Object3D.prototype );
 
 THREE.PointLightHelper.prototype.update = function () {
 
-	this.material.color.copy( this.light.color );
-	this.material.color.multiplyScalar( THREE.Math.clamp( this.light.intensity, 0, 1 ) );
+	this.lightSphere.position.copy( this.light.position );
+	this.lightSphere.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
 	/*
 	this.lightDistance.material.color.copy( this.color );