Simplified HemisphereLightHelper.

editor/js/ui/Viewport.js

@@ -281,17 +281,23 @@ var Viewport = function ( signals ) {
 
 			} else if ( object instanceof THREE.SpotLight ) {
 
-				var helper = new THREE.SpotLightHelper( object, 5 );
+				var helper = new THREE.SpotLightHelper( object, 10 );
 				sceneHelpers.add( helper );
 
+				objectsToHelpers[ object.id ] = helper;
+				helpersToObjects[ helper.lightSphere.id ] = object;
+
 				objects.push( helper.lightSphere );
 				objects.push( helper.targetSphere );
 
 			} else if ( object instanceof THREE.HemisphereLight ) {
 
-				var helper = new THREE.HemisphereLightHelper( object, 5, 30 );
+				var helper = new THREE.HemisphereLightHelper( object, 10 );
 				sceneHelpers.add( helper );
 
+				objectsToHelpers[ object.id ] = helper;
+				helpersToObjects[ helper.lightSphere.id ] = object;
+
 				objects.push( helper.lightSphere );
 
 			} else {

src/extras/helpers/DirectionalLightHelper.js

@@ -50,6 +50,7 @@ THREE.DirectionalLightHelper.prototype = Object.create( THREE.Object3D.prototype
 THREE.DirectionalLightHelper.prototype.update = function () {
 
 	this.lightSphere.position.copy( this.light.position );
+
 	this.lightSphere.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
 	this.targetLine.geometry.computeLineDistances();

src/extras/helpers/HemisphereLightHelper.js

@@ -1,7 +1,6 @@
 /**
  * @author alteredq / http://alteredqualia.com/
- *
- *	- shows hemisphere light intensity, sky and ground colors and directions
+ * @author mrdoob / http://mrdoob.com/
  */
 
 THREE.HemisphereLightHelper = function ( light, sphereSize, arrowLength, domeSize ) {
@@ -10,82 +9,25 @@ THREE.HemisphereLightHelper = function ( light, sphereSize, arrowLength, domeSiz
 
 	this.light = light;
 
-	// position
+	var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
+	geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
 
-	this.position = light.position;
+	for ( var i = 0, il = 8; i < il; i ++ ) {
 
-	//
-
-	var intensity = THREE.Math.clamp( light.intensity, 0, 1 );
-
-	// sky color
-
-	this.color = light.color.clone();
-	this.color.multiplyScalar( intensity );
-
-	var hexColor = this.color.getHex();
-
-	// ground color
-
-	this.groundColor = light.groundColor.clone();
-	this.groundColor.multiplyScalar( intensity );
-
-	var hexColorGround = this.groundColor.getHex();
-
-	// double colored light bulb
-
-	var bulbGeometry = new THREE.SphereGeometry( sphereSize, 16, 8, 0, Math.PI * 2, 0, Math.PI * 0.5 );
-	var bulbGroundGeometry = new THREE.SphereGeometry( sphereSize, 16, 8, 0, Math.PI * 2, Math.PI * 0.5, Math.PI );
-
-	var bulbSkyMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false } );
-	var bulbGroundMaterial = new THREE.MeshBasicMaterial( { color: hexColorGround, fog: false } );
-
-	for ( var i = 0, il = bulbGeometry.faces.length; i < il; i ++ ) {
-
-		bulbGeometry.faces[ i ].materialIndex = 0;
-
-	}
-
-	for ( var i = 0, il = bulbGroundGeometry.faces.length; i < il; i ++ ) {
-
-		bulbGroundGeometry.faces[ i ].materialIndex = 1;
+		geometry.faces[ i ].materialIndex = i < 4 ? 0 : 1;
 
 	}
 
-	THREE.GeometryUtils.merge( bulbGeometry, bulbGroundGeometry );
+	var materialSky = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
+	materialSky.color.copy( light.color ).multiplyScalar( light.intensity );
 
-	this.lightSphere = new THREE.Mesh( bulbGeometry, new THREE.MeshFaceMaterial( [ bulbSkyMaterial, bulbGroundMaterial ] ) );
+	var materialGround = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
+	materialGround.color.copy( light.groundColor ).multiplyScalar( light.intensity );
 
-	// arrows for sky and ground light directions
-
-	this.lightArrow = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, ( sphereSize + arrowLength ) * 1.1, 0 ), arrowLength, hexColor );
-	this.lightArrow.rotation.x = Math.PI;
-
-	this.lightArrowGround = new THREE.ArrowHelper( new THREE.Vector3( 0, 1, 0 ), new THREE.Vector3( 0, ( sphereSize + arrowLength ) * -1.1, 0 ), arrowLength, hexColorGround );
-
-	var joint = new THREE.Object3D();
-	joint.rotation.x = -Math.PI * 0.5;
-
-	joint.add( this.lightSphere );
-	joint.add( this.lightArrow );
-	joint.add( this.lightArrowGround );
-
-	this.add( joint );
-
-	//
-
-	this.lightSphere.userData.isGizmo = true;
-	this.lightSphere.userData.gizmoSubject = light;
-	this.lightSphere.userData.gizmoRoot = this;
-
-	//
-
-	this.userData.isGizmo = true;
-
-	//
-
-	this.target = new THREE.Vector3();
-	this.lookAt( this.target );
+	this.lightSphere = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( [ materialSky, materialGround ] ) );
+	this.lightSphere.position.copy( light.position );
+	this.lightSphere.lookAt( new THREE.Vector3() );
+	this.add( this.lightSphere );
 
 }
 
@@ -93,23 +35,11 @@ THREE.HemisphereLightHelper.prototype = Object.create( THREE.Object3D.prototype
 
 THREE.HemisphereLightHelper.prototype.update = function () {
 
-	// update sphere sky and ground colors to light color * light intensity
-
-	var intensity = THREE.Math.clamp( this.light.intensity, 0, 1 );
-
-	this.color.copy( this.light.color );
-	this.color.multiplyScalar( intensity );
-
-	this.groundColor.copy( this.light.groundColor );
-	this.groundColor.multiplyScalar( intensity );
-
-	this.lightSphere.material.materials[ 0 ].color.copy( this.color );
-	this.lightSphere.material.materials[ 1 ].color.copy( this.groundColor );
-
-	this.lightArrow.setColor( this.color.getHex() );
-	this.lightArrowGround.setColor( this.groundColor.getHex() );
+	this.lightSphere.position.copy( this.light.position );
+	this.lightSphere.lookAt( new THREE.Vector3() );
 
-	this.lookAt( this.target );
+	this.lightSphere.material.materials[ 0 ].color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+	this.lightSphere.material.materials[ 1 ].color.copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
 
 }
 

src/extras/helpers/PointLightHelper.js

@@ -46,6 +46,7 @@ THREE.PointLightHelper.prototype = Object.create( THREE.Object3D.prototype );
 THREE.PointLightHelper.prototype.update = function () {
 
 	this.lightSphere.position.copy( this.light.position );
+
 	this.lightSphere.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
 	/*