Editor: extracted light gizmo into DirectionalLightHelper.

build/three.js

@@ -32587,6 +32587,89 @@ THREE.CameraHelper.__projector = new THREE.Projector();
 THREE.CameraHelper.__v = new THREE.Vector3();
 THREE.CameraHelper.__c = new THREE.Camera();
 
+/**
+ * @author alteredq / http://alteredqualia.com/
+ *
+ *	- shows directional light color, intensity, position, orientation and target
+ */
+
+THREE.DirectionalLightHelper = function ( light, arrowLength ) {
+
+	THREE.Object3D.call( this );
+
+	this.light = light;
+
+	this.position = light.position;
+
+	this.properties.isGizmo = true;
+
+	this.color = light.color.clone();
+
+	this.color.r *= light.intensity;
+	this.color.g *= light.intensity;
+	this.color.b *= light.intensity;
+
+	var hexColor = this.color.getHex();
+
+	this.direction = new THREE.Vector3();
+	this.direction.sub( light.target.position, light.position );
+
+	var targetGeo = new THREE.SphereGeometry( 5, 8, 4 );
+	var lightGeo = new THREE.SphereGeometry( 5, 16, 8 );
+	var lightMaterial = new THREE.MeshBasicMaterial( { color: hexColor } );
+
+	this.lightArrow = new THREE.ArrowHelper( this.direction, null, arrowLength, hexColor );
+	this.lightSphere = new THREE.Mesh( lightGeo, lightMaterial );
+
+	this.add( this.lightArrow );
+	this.add( this.lightSphere );
+
+	this.targetSphere = null;
+
+	if ( light.target.properties.targetInverse ) {
+
+		var targetMaterial = new THREE.MeshBasicMaterial( { color: hexColor, wireframe: true } );
+
+		this.targetSphere = new THREE.Mesh( targetGeo, targetMaterial );
+		this.targetSphere.position = light.target.position;
+
+		this.targetSphere.properties.isGizmo = true;
+		this.targetSphere.properties.gizmoSubject = light.target;
+		this.targetSphere.properties.gizmoRoot = this.targetSphere;
+
+	}
+
+	this.lightSphere.properties.isGizmo = true;
+	this.lightSphere.properties.gizmoSubject = light;
+	this.lightSphere.properties.gizmoRoot = this;
+
+}
+
+THREE.DirectionalLightHelper.prototype = Object.create( THREE.Object3D.prototype );
+
+THREE.DirectionalLightHelper.prototype.update = function () {
+
+	// set arrow orientation
+	// pointing from light to target
+
+	this.direction.sub( this.light.target.position, this.light.position );
+	this.lightArrow.setDirection( this.direction );
+
+	// set arrow and spheres colors to light color * light intensity
+
+	this.color.copy( this.light.color );
+
+	var intensity = THREE.Math.clamp( this.light.intensity, 0, 1 );
+	this.color.r *= intensity;
+	this.color.g *= intensity;
+	this.color.b *= intensity;
+
+	this.lightArrow.setColor( this.color.getHex() );
+	this.lightSphere.material.color.copy( this.color );
+	this.targetSphere.material.color.copy( this.color );
+
+}
+
 /*
  *	@author zz85 / http://twitter.com/blurspline / http://www.lab4games.net/zz85/blog 
  * 

build/three.min.js

@@ -695,6 +695,10 @@ THREE.CameraHelper=function(a){function b(a,b,d){c(a,d);c(b,d)}function c(a,b){d
 "cf2",3355443);b("cf3","cf4",3355443);this.camera=a;this.update(a)};THREE.CameraHelper.prototype=Object.create(THREE.Line.prototype);
 THREE.CameraHelper.prototype.update=function(){function a(a,d,e,f){THREE.CameraHelper.__v.set(d,e,f);THREE.CameraHelper.__projector.unprojectVector(THREE.CameraHelper.__v,THREE.CameraHelper.__c);a=b.pointMap[a];if(a!==void 0){d=0;for(e=a.length;d<e;d++)b.geometry.vertices[a[d]].copy(THREE.CameraHelper.__v)}}var b=this;THREE.CameraHelper.__c.projectionMatrix.copy(this.camera.projectionMatrix);a("c",0,0,-1);a("t",0,0,1);a("n1",-1,-1,-1);a("n2",1,-1,-1);a("n3",-1,1,-1);a("n4",1,1,-1);a("f1",-1,-1,1);
 a("f2",1,-1,1);a("f3",-1,1,1);a("f4",1,1,1);a("u1",0.7,1.1,-1);a("u2",-0.7,1.1,-1);a("u3",0,2,-1);a("cf1",-1,0,1);a("cf2",1,0,1);a("cf3",0,-1,1);a("cf4",0,1,1);a("cn1",-1,0,-1);a("cn2",1,0,-1);a("cn3",0,-1,-1);a("cn4",0,1,-1);this.geometry.verticesNeedUpdate=true};THREE.CameraHelper.__projector=new THREE.Projector;THREE.CameraHelper.__v=new THREE.Vector3;THREE.CameraHelper.__c=new THREE.Camera;
+THREE.DirectionalLightHelper=function(a,b){THREE.Object3D.call(this);this.light=a;this.position=a.position;this.properties.isGizmo=true;this.color=a.color.clone();this.color.r=this.color.r*a.intensity;this.color.g=this.color.g*a.intensity;this.color.b=this.color.b*a.intensity;var c=this.color.getHex();this.direction=new THREE.Vector3;this.direction.sub(a.target.position,a.position);var d=new THREE.SphereGeometry(5,8,4),e=new THREE.SphereGeometry(5,16,8),f=new THREE.MeshBasicMaterial({color:c});this.lightArrow=
+new THREE.ArrowHelper(this.direction,null,b,c);this.lightSphere=new THREE.Mesh(e,f);this.add(this.lightArrow);this.add(this.lightSphere);this.targetSphere=null;if(a.target.properties.targetInverse){c=new THREE.MeshBasicMaterial({color:c,wireframe:true});this.targetSphere=new THREE.Mesh(d,c);this.targetSphere.position=a.target.position;this.targetSphere.properties.isGizmo=true;this.targetSphere.properties.gizmoSubject=a.target;this.targetSphere.properties.gizmoRoot=this.targetSphere}this.lightSphere.properties.isGizmo=
+true;this.lightSphere.properties.gizmoSubject=a;this.lightSphere.properties.gizmoRoot=this};THREE.DirectionalLightHelper.prototype=Object.create(THREE.Object3D.prototype);
+THREE.DirectionalLightHelper.prototype.update=function(){this.direction.sub(this.light.target.position,this.light.position);this.lightArrow.setDirection(this.direction);this.color.copy(this.light.color);var a=THREE.Math.clamp(this.light.intensity,0,1);this.color.r=this.color.r*a;this.color.g=this.color.g*a;this.color.b=this.color.b*a;this.lightArrow.setColor(this.color.getHex());this.lightSphere.material.color.copy(this.color);this.targetSphere.material.color.copy(this.color)};
 THREE.SubdivisionModifier=function(a){this.subdivisions=a===void 0?1:a;this.useOldVertexColors=false;this.supportUVs=true;this.debug=false};THREE.SubdivisionModifier.prototype.modify=function(a){for(var b=this.subdivisions;b-- >0;)this.smooth(a)};THREE.GeometryUtils.orderedKey=function(a,b){return Math.min(a,b)+"_"+Math.max(a,b)};
 THREE.GeometryUtils.computeEdgeFaces=function(a){function b(a,b){g[a]===void 0&&(g[a]=[]);g[a].push(b)}var c,d,e,f,g={},h=THREE.GeometryUtils.orderedKey;c=0;for(d=a.faces.length;c<d;c++){e=a.faces[c];if(e instanceof THREE.Face3){f=h(e.a,e.b);b(f,c);f=h(e.b,e.c);b(f,c);f=h(e.c,e.a);b(f,c)}else if(e instanceof THREE.Face4){f=h(e.a,e.b);b(f,c);f=h(e.b,e.c);b(f,c);f=h(e.c,e.d);b(f,c);f=h(e.d,e.a);b(f,c)}}return g};
 THREE.SubdivisionModifier.prototype.smooth=function(a){function b(){m.debug&&(console&&console.assert)&&console.assert.apply(console,arguments)}function c(){m.debug&&console.log.apply(console,arguments)}function d(){console&&console.log.apply(console,arguments)}function e(a,b,d,e,g,h,l){var n=new THREE.Face4(a,b,d,e,null,g.color,g.materialIndex);if(m.useOldVertexColors){n.vertexColors=[];for(var o,p,q,s=0;s<4;s++){q=h[s];o=new THREE.Color;o.setRGB(0,0,0);for(var r=0;r<q.length;r++){p=g.vertexColors[q[r]-

editor/js/ui/Viewport.js

@@ -49,13 +49,6 @@ var Viewport = function ( signals ) {
 
 	//
 
-	var lightGeo = new THREE.SphereGeometry( 5, 16, 8 );
-	var targetGeo = new THREE.SphereGeometry( 5, 8, 4 );
-
-	var direction = new THREE.Vector3();
-
-	//
-
 	var scene = new THREE.Scene();
 
 	var camera = new THREE.PerspectiveCamera( 50, 1, 1, 5000 );
@@ -315,53 +308,16 @@ var Viewport = function ( signals ) {
 
 		if ( object instanceof THREE.DirectionalLight ) {
 
-			var lightGizmo = new THREE.Object3D();
-			lightGizmo.position = object.position;
-			lightGizmo.properties.isGizmo = true;
-
-			var lightColor = object.color.clone();
-			lightColor.r *= object.intensity;
-			lightColor.g *= object.intensity;
-			lightColor.b *= object.intensity;
-
-			var length = 30;
-			direction.sub( object.target.position, object.position );
-
-			var lightArrow = new THREE.ArrowHelper( direction, null, length, lightColor.getHex() );
-
-			var lightMaterial = new THREE.MeshBasicMaterial( { color: lightColor.getHex() } );
-			var lightSphere = new THREE.Mesh( lightGeo, lightMaterial );
-
-			lightGizmo.add( lightArrow );
-			lightGizmo.add( lightSphere );
-
+			var lightGizmo = new THREE.DirectionalLightHelper( object, 30 );
 			sceneHelpers.add( lightGizmo );
+			sceneHelpers.add( lightGizmo.targetSphere );
 
-			object.properties.arrow = lightArrow;
-			object.properties.pickingProxy = lightSphere;
-
-			if ( object.target.properties.targetInverse ) {
-
-				var targetMaterial = new THREE.MeshBasicMaterial( { color: lightColor.getHex(), wireframe: true } );
+			object.properties.helper = lightGizmo;
+			object.properties.pickingProxy = lightGizmo.lightSphere;
+			object.target.properties.pickingProxy = lightGizmo.targetSphere;
 
-				var targetSphere = new THREE.Mesh( targetGeo, targetMaterial );
-				targetSphere.position = object.target.position;
-
-				sceneHelpers.add( targetSphere );
-
-				targetSphere.properties.isGizmo = true;
-				targetSphere.properties.gizmoSubject = object.target;
-				targetSphere.properties.gizmoRoot = targetSphere;
-				objects.push( targetSphere );
-
-				object.target.properties.pickingProxy = targetSphere;
-
-			}
-
-			lightSphere.properties.isGizmo = true;
-			lightSphere.properties.gizmoSubject = object;
-			lightSphere.properties.gizmoRoot = lightGizmo;
-			objects.push( lightSphere );
+			objects.push( lightGizmo.lightSphere );
+			objects.push( lightGizmo.targetSphere );
 
 		} else if ( object instanceof THREE.PointLight ) {
 		} else if ( object instanceof THREE.SpotLight ) {
@@ -392,32 +348,14 @@ 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 );
+			object.properties.helper.update();
 
 		} else if ( object instanceof THREE.PointLight ) {
 		} else if ( object instanceof THREE.SpotLight ) {
 		} else if ( object instanceof THREE.HemisphereLight ) {
 		} else if ( object.properties.targetInverse ) {
 
-			direction.sub( object.position, object.properties.targetInverse.position );
-			object.properties.targetInverse.properties.arrow.setDirection( direction );
+			object.properties.targetInverse.properties.helper.update();
 
 		}
 

src/extras/helpers/DirectionalLightHelper.js

@@ -0,0 +1,83 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ *
+ *	- shows directional light color, intensity, position, orientation and target
+ */
+
+THREE.DirectionalLightHelper = function ( light, arrowLength ) {
+
+	THREE.Object3D.call( this );
+
+	this.light = light;
+
+	this.position = light.position;
+
+	this.properties.isGizmo = true;
+
+	this.color = light.color.clone();
+
+	this.color.r *= light.intensity;
+	this.color.g *= light.intensity;
+	this.color.b *= light.intensity;
+
+	var hexColor = this.color.getHex();
+
+	this.direction = new THREE.Vector3();
+	this.direction.sub( light.target.position, light.position );
+
+	var targetGeo = new THREE.SphereGeometry( 5, 8, 4 );
+	var lightGeo = new THREE.SphereGeometry( 5, 16, 8 );
+	var lightMaterial = new THREE.MeshBasicMaterial( { color: hexColor } );
+
+	this.lightArrow = new THREE.ArrowHelper( this.direction, null, arrowLength, hexColor );
+	this.lightSphere = new THREE.Mesh( lightGeo, lightMaterial );
+
+	this.add( this.lightArrow );
+	this.add( this.lightSphere );
+
+	this.targetSphere = null;
+
+	if ( light.target.properties.targetInverse ) {
+
+		var targetMaterial = new THREE.MeshBasicMaterial( { color: hexColor, wireframe: true } );
+
+		this.targetSphere = new THREE.Mesh( targetGeo, targetMaterial );
+		this.targetSphere.position = light.target.position;
+
+		this.targetSphere.properties.isGizmo = true;
+		this.targetSphere.properties.gizmoSubject = light.target;
+		this.targetSphere.properties.gizmoRoot = this.targetSphere;
+
+	}
+
+	this.lightSphere.properties.isGizmo = true;
+	this.lightSphere.properties.gizmoSubject = light;
+	this.lightSphere.properties.gizmoRoot = this;
+
+}
+
+THREE.DirectionalLightHelper.prototype = Object.create( THREE.Object3D.prototype );
+
+THREE.DirectionalLightHelper.prototype.update = function () {
+
+	// set arrow orientation
+	// pointing from light to target
+
+	this.direction.sub( this.light.target.position, this.light.position );
+	this.lightArrow.setDirection( this.direction );
+
+	// set arrow and spheres colors to light color * light intensity
+
+	this.color.copy( this.light.color );
+
+	var intensity = THREE.Math.clamp( this.light.intensity, 0, 1 );
+	this.color.r *= intensity;
+	this.color.g *= intensity;
+	this.color.b *= intensity;
+
+	this.lightArrow.setColor( this.color.getHex() );
+	this.lightSphere.material.color.copy( this.color );
+	this.targetSphere.material.color.copy( this.color );
+
+}
+

utils/includes/extras.json

@@ -36,6 +36,7 @@
 	"../src/extras/helpers/AxisHelper.js",
 	"../src/extras/helpers/ArrowHelper.js",
 	"../src/extras/helpers/CameraHelper.js",
+	"../src/extras/helpers/DirectionalLightHelper.js",
 	"../src/extras/modifiers/SubdivisionModifier.js",
 	"../src/extras/objects/ImmediateRenderObject.js",
 	"../src/extras/objects/LensFlare.js",

utils/includes/webgl.json

@@ -77,6 +77,7 @@
 	"../src/renderers/renderables/RenderableLine.js",
 	"../src/extras/core/Gyroscope.js",
 	"../src/extras/helpers/CameraHelper.js",
+	"../src/extras/helpers/DirectionalLightHelper.js",
 	"../src/extras/objects/LensFlare.js",
 	"../src/extras/objects/ImmediateRenderObject.js",
 	"../src/extras/renderers/plugins/LensFlarePlugin.js",