Editor: added dashed line from light to target for DirectionalLightHelper.

build/three.js

@@ -32637,6 +32637,15 @@ THREE.DirectionalLightHelper = function ( light, arrowLength ) {
 		this.targetSphere.properties.gizmoSubject = light.target;
 		this.targetSphere.properties.gizmoRoot = this.targetSphere;
 
+		var lineMaterial = new THREE.LineDashedMaterial( { color: hexColor, dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true } );
+		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.properties.isGizmo = true;
+
 	}
 
 	this.lightSphere.properties.isGizmo = true;
@@ -32667,6 +32676,15 @@ THREE.DirectionalLightHelper.prototype.update = function () {
 	this.lightArrow.setColor( this.color.getHex() );
 	this.lightSphere.material.color.copy( this.color );
 	this.targetSphere.material.color.copy( this.color );
+	this.targetLine.material.color.copy( this.color );
+
+	// set target line
+
+	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;
 
 }
 

build/three.min.js

@@ -696,11 +696,11 @@ THREE.CameraHelper=function(a){function b(a,b,d){c(a,d);c(b,d)}function c(a,b){d
 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};
+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){e=new THREE.MeshBasicMaterial({color:c,wireframe:true});this.targetSphere=new THREE.Mesh(d,e);this.targetSphere.position=a.target.position;this.targetSphere.properties.isGizmo=true;this.targetSphere.properties.gizmoSubject=a.target;this.targetSphere.properties.gizmoRoot=this.targetSphere;c=new THREE.LineDashedMaterial({color:c,
+dashSize:4,gapSize:4,opacity:0.75,transparent:true});d=new THREE.Geometry;d.vertices.push(this.position.clone());d.vertices.push(this.targetSphere.position.clone());d.computeLineDistances();this.targetLine=new THREE.Line(d,c);this.targetLine.properties.isGizmo=true}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);this.targetLine.material.color.copy(this.color);
+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};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]-
 1];o.r=o.r+p.r;o.g=o.g+p.g;o.b=o.b+p.b}o.r=o.r/q.length;o.g=o.g/q.length;o.b=o.b/q.length;n.vertexColors[s]=o}}i.push(n);if(m.supportUVs){g=[f(a,""),f(b,l),f(d,l),f(e,l)];g[0]?g[1]?g[2]?g[3]?j.push(g):c("d :( ",e+":"+l):c("c :( ",d+":"+l):c("b :( ",b+":"+l):c("a :( ",a+":"+l)}}function f(a,b){var e=a+":"+b,f=u[e];if(!f){a>=q&&a<q+o.length?c("face pt"):c("edge pt");d("warning, UV not found for",e);return null}return f}function g(a,b,c){var e=a+":"+b;e in u?d("dup vertexNo",a,"oldFaceNo",b,"value",
 c,"key",e,u[e]):u[e]=c}var h=[],i=[],j=[],m=this,n=THREE.GeometryUtils.orderedKey,l=THREE.GeometryUtils.computeEdgeFaces,p=a.vertices,o=a.faces,q=p.length,h=p.concat(),s=[],r={},A={},u={},t,F,z,w,v,C=a.faceVertexUvs[0],D;c("originalFaces, uvs, originalVerticesLength",o.length,C.length,q);if(m.supportUVs){t=0;for(F=C.length;t<F;t++){z=0;for(w=C[t].length;z<w;z++){D=o[t]["abcd".charAt(z)];g(D,t,C[t][z])}}}if(C.length==0)m.supportUVs=false;t=0;for(var I in u)t++;if(!t){m.supportUVs=false;c("no uvs")}t=

editor/js/ui/Viewport.js

@@ -311,6 +311,7 @@ var Viewport = function ( signals ) {
 			var lightGizmo = new THREE.DirectionalLightHelper( object, 30 );
 			sceneHelpers.add( lightGizmo );
 			sceneHelpers.add( lightGizmo.targetSphere );
+			sceneHelpers.add( lightGizmo.targetLine );
 
 			object.properties.helper = lightGizmo;
 			object.properties.pickingProxy = lightGizmo.lightSphere;
@@ -318,6 +319,7 @@ var Viewport = function ( signals ) {
 
 			objects.push( lightGizmo.lightSphere );
 			objects.push( lightGizmo.targetSphere );
+			objects.push( lightGizmo.targetLine );
 
 		} else if ( object instanceof THREE.PointLight ) {
 		} else if ( object instanceof THREE.SpotLight ) {

src/extras/helpers/DirectionalLightHelper.js

@@ -48,6 +48,15 @@ THREE.DirectionalLightHelper = function ( light, arrowLength ) {
 		this.targetSphere.properties.gizmoSubject = light.target;
 		this.targetSphere.properties.gizmoRoot = this.targetSphere;
 
+		var lineMaterial = new THREE.LineDashedMaterial( { color: hexColor, dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true } );
+		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.properties.isGizmo = true;
+
 	}
 
 	this.lightSphere.properties.isGizmo = true;
@@ -78,6 +87,15 @@ THREE.DirectionalLightHelper.prototype.update = function () {
 	this.lightArrow.setColor( this.color.getHex() );
 	this.lightSphere.material.color.copy( this.color );
 	this.targetSphere.material.color.copy( this.color );
+	this.targetLine.material.color.copy( this.color );
+
+	// set target line
+
+	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;
 
 }