Simplified SpotlightHelper.

editor/js/ui/Viewport.js

@@ -288,7 +288,6 @@ var Viewport = function ( signals ) {
 				helpersToObjects[ helper.lightSphere.id ] = object;
 
 				objects.push( helper.lightSphere );
-				objects.push( helper.targetSphere );
 
 			} else if ( object instanceof THREE.HemisphereLight ) {
 
@@ -331,10 +330,9 @@ var Viewport = function ( signals ) {
 
 			object.updateProjectionMatrix();
 
-		} else if ( object instanceof THREE.PointLight ||
-			    object instanceof THREE.DirectionalLight ||
-			    object instanceof THREE.HemisphereLight ||
-			    object instanceof THREE.SpotLight ) {
+		}
+
+		if ( objectsToHelpers[ object.id ] !== undefined ) {
 
 			objectsToHelpers[ object.id ].update();
 
@@ -375,8 +373,6 @@ var Viewport = function ( signals ) {
 			delete objectsToHelpers[ selected.id ];
 			delete helpersToObjects[ helper.id ];
 
-			updateMaterials( scene );
-
 			if ( selected instanceof THREE.DirectionalLight ||
 			     selected instanceof THREE.SpotLight ) {
 
@@ -384,6 +380,8 @@ var Viewport = function ( signals ) {
 
 			}
 
+			updateMaterials( scene );
+
 		} else {
 
 			selected.traverse( function ( object ) {

src/extras/helpers/DirectionalLightHelper.js

@@ -9,39 +9,30 @@ THREE.DirectionalLightHelper = function ( light, sphereSize ) {
 
 	this.light = light;
 
-	//
-
 	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 );
+	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.lightSphere.position = this.light.position;
 	this.add( this.lightSphere );
 
-	var lineGeometry = new THREE.Geometry();
-	lineGeometry.vertices.push( this.light.position );
-	lineGeometry.vertices.push( this.light.target.position );
-	lineGeometry.computeLineDistances();
-
-	var lineMaterial = new THREE.LineDashedMaterial( { dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true, fog: false } );
-	lineMaterial.color.copy( material.color );
-
-	this.targetLine = new THREE.Line( lineGeometry, lineMaterial );
-	this.add( this.targetLine );
-
 	/*
-	// light target helper
-
-	this.targetSphere = null;
+	this.targetSphere = new THREE.Mesh( geometry, material );
+	this.targetSphere.position = this.light.target.position;
+	this.add( this.targetSphere );
+	*/
 
-	if ( light.target.userData.targetInverse !== undefined ) {
+	var geometry = new THREE.Geometry();
+	geometry.vertices.push( this.light.position );
+	geometry.vertices.push( this.light.target.position );
+	geometry.computeLineDistances();
 
-		this.targetSphere = new THREE.Mesh( geometry, material );
-		this.targetSphere.position = light.target.position;
+	var material = new THREE.LineDashedMaterial( { dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true, fog: false } );
+	material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
-	}
-	*/
+	this.targetLine = new THREE.Line( geometry, material );
+	this.add( this.targetLine );
 
 }
 
@@ -49,23 +40,11 @@ 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();
 	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.targetLine.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
-		this.targetSphere.material.color.copy( this.color );
-
-	}
-	*/
-
-}
+};
 

src/extras/helpers/HemisphereLightHelper.js

@@ -25,21 +25,20 @@ THREE.HemisphereLightHelper = function ( light, sphereSize, arrowLength, domeSiz
 	materialGround.color.copy( light.groundColor ).multiplyScalar( light.intensity );
 
 	this.lightSphere = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( [ materialSky, materialGround ] ) );
-	this.lightSphere.position.copy( light.position );
+	this.lightSphere.position = light.position;
 	this.lightSphere.lookAt( new THREE.Vector3() );
 	this.add( this.lightSphere );
 
-}
+};
 
 THREE.HemisphereLightHelper.prototype = Object.create( THREE.Object3D.prototype );
 
 THREE.HemisphereLightHelper.prototype.update = function () {
 
-	this.lightSphere.position.copy( this.light.position );
 	this.lightSphere.lookAt( new THREE.Vector3() );
 
 	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

@@ -14,7 +14,7 @@ THREE.PointLightHelper = function ( light, sphereSize ) {
 	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.lightSphere.position = this.light.position;
 	this.add( this.lightSphere );
 
 	/*
@@ -39,14 +39,12 @@ THREE.PointLightHelper = function ( light, sphereSize ) {
 	this.add( this.lightDistance );
 	*/
 
-}
+};
 
 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 );
 
 	/*
@@ -66,5 +64,5 @@ THREE.PointLightHelper.prototype.update = function () {
 	}
 	*/
 
-}
+};
 

src/extras/helpers/SpotLightHelper.js

@@ -1,7 +1,6 @@
 /**
  * @author alteredq / http://alteredqualia.com/
- *
- *	- shows spot light color, intensity, position, orientation, light cone and target
+ * @author mrdoob / http://mrdoob.com/
  */
 
 THREE.SpotLightHelper = function ( light, sphereSize ) {
@@ -10,131 +9,44 @@ THREE.SpotLightHelper = function ( light, sphereSize ) {
 
 	this.light = light;
 
-	// position
+	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.position = light.position;
+	this.lightSphere = new THREE.Mesh( geometry, material );
+	this.lightSphere.position = this.light.position;
+	this.add( this.lightSphere );
 
-	// direction
+	var geometry = new THREE.CylinderGeometry( 0.0001, 1, 1, 8, 1, true );
+	geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ).translate( new THREE.Vector3( 0, -0.5, 0 ) ) );
 
-	this.direction = new THREE.Vector3();
-	this.direction.subVectors( light.target.position, light.position );
+	var material = new THREE.MeshBasicMaterial( { fog: false, wireframe: true, opacity: 0.3, transparent: true } );
+	material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
-	// 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 bulbGeometry = new THREE.SphereGeometry( sphereSize, 16, 8 );
-	var coneGeometry = new THREE.CylinderGeometry( 0.0001, 1, 1, 8, 1, true );
-
-	var coneMatrix = new THREE.Matrix4();
-	coneMatrix.rotateX( -Math.PI/2 );
-	coneMatrix.translate( new THREE.Vector3( 0, -0.5, 0 ) );
-	coneGeometry.applyMatrix( coneMatrix );
-
-	var bulbMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false } );
-	var coneMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false, wireframe: true, opacity: 0.3, transparent: true } );
-
-	this.lightSphere = new THREE.Mesh( bulbGeometry, bulbMaterial );
-	this.lightCone = new THREE.Mesh( coneGeometry, coneMaterial );
+	this.lightCone = new THREE.Mesh( geometry, material );
+	this.lightCone.position = this.light.position;
 
 	var coneLength = light.distance ? light.distance : 10000;
 	var coneWidth = coneLength * Math.tan( light.angle * 0.5 ) * 2;
-	this.lightCone.scale.set( coneWidth, coneWidth, coneLength );
-
-	this.gyroscope = new THREE.Gyroscope();
 
-	this.gyroscope.add( this.lightSphere );
+	this.lightCone.scale.set( coneWidth, coneWidth, coneLength );
+	this.lightCone.lookAt( this.light.target.position );
 
-	this.add( this.gyroscope );
 	this.add( this.lightCone );
 
-	this.lookAt( light.target.position );
-
-	this.lightSphere.userData.isGizmo = true;
-	this.lightSphere.userData.gizmoSubject = light;
-	this.lightSphere.userData.gizmoRoot = this;
-
-	// 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.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;
-
-}
+};
 
 THREE.SpotLightHelper.prototype = Object.create( THREE.Object3D.prototype );
 
 THREE.SpotLightHelper.prototype.update = function () {
 
-	// update arrow orientation
-	// pointing from light to target
-
-	this.direction.subVectors( this.light.target.position, this.light.position );
-
-	// update light cone orientation and size
-
-	this.lookAt( this.light.target.position );
-
 	var coneLength = this.light.distance ? this.light.distance : 10000;
 	var coneWidth = coneLength * Math.tan( this.light.angle * 0.5 ) * 2;
-	this.lightCone.scale.set( coneWidth, coneWidth, coneLength );
 
-	// update arrow, spheres and line 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.lightSphere.material.color.copy( this.color );
-	this.lightCone.material.color.copy( this.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;
+	this.lightCone.scale.set( coneWidth, coneWidth, coneLength );
+	this.lightCone.lookAt( this.light.target.position );
 
-	}
+	this.lightSphere.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+	this.lightCone.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
 };