Refactored helpers.

editor/js/Editor.js

@@ -127,47 +127,78 @@ Editor.prototype = {
 
 	//
 
-	addHelper: function ( object ) {
+	addHelper: function () {
 
-		if ( object instanceof THREE.PointLight ) {
+		var geometry = new THREE.SphereGeometry( 20, 4, 2 );
+		var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
 
-			var helper = new THREE.PointLightHelper( object, 10 );
-			helper.userData.object = object;
-			this.sceneHelpers.add( helper );
-			this.helpers[ object.id ] = helper;
+		return function ( object ) {
 
-			this.signals.helperAdded.dispatch( helper );
+			if ( object instanceof THREE.PointLight ) {
 
-		} else if ( object instanceof THREE.DirectionalLight ) {
+				var picker = new THREE.Mesh( geometry, material );
+				picker.name = 'picker';
+				picker.userData.object = object;
+				picker.visible = false;
 
-			var helper = new THREE.DirectionalLightHelper( object, 10 );
-			helper.userData.object = object;
-			this.sceneHelpers.add( helper );
-			this.helpers[ object.id ] = helper;
+				var helper = new THREE.PointLightHelper( object, 10 );
+				helper.add( picker );
+			
+				this.sceneHelpers.add( helper );
+				this.helpers[ object.id ] = helper;
 
-			this.signals.helperAdded.dispatch( helper );
+				this.signals.helperAdded.dispatch( helper );
 
-		} else if ( object instanceof THREE.SpotLight ) {
+			} else if ( object instanceof THREE.DirectionalLight ) {
 
-			var helper = new THREE.SpotLightHelper( object, 10 );
-			helper.userData.object = object;
-			this.sceneHelpers.add( helper );
-			this.helpers[ object.id ] = helper;
+				var picker = new THREE.Mesh( geometry, material );
+				picker.name = 'picker';
+				picker.userData.object = object;
+				picker.visible = false;
 
-			this.signals.helperAdded.dispatch( helper );
+				var helper = new THREE.DirectionalLightHelper( object, 20 );
+				helper.add( picker );
 
-		} else if ( object instanceof THREE.HemisphereLight ) {
+				this.sceneHelpers.add( helper );
+				this.helpers[ object.id ] = helper;
 
-			var helper = new THREE.HemisphereLightHelper( object, 10 );
-			helper.userData.object = object;
-			this.sceneHelpers.add( helper );
-			this.helpers[ object.id ] = helper;
+				this.signals.helperAdded.dispatch( helper );
 
-			this.signals.helperAdded.dispatch( helper );
+			} else if ( object instanceof THREE.SpotLight ) {
 
-		}
+				var picker = new THREE.Mesh( geometry, material );
+				picker.name = 'picker';
+				picker.userData.object = object;
+				picker.visible = false;
 
-	},
+				var helper = new THREE.SpotLightHelper( object, 10 );
+				helper.add( picker );
+
+				this.sceneHelpers.add( helper );
+				this.helpers[ object.id ] = helper;
+
+				this.signals.helperAdded.dispatch( helper );
+
+			} else if ( object instanceof THREE.HemisphereLight ) {
+
+				var picker = new THREE.Mesh( geometry, material );
+				picker.name = 'picker';
+				picker.userData.object = object;
+				picker.visible = false;
+
+				var helper = new THREE.HemisphereLightHelper( object, 10 );
+				helper.add( picker );
+
+				this.sceneHelpers.add( helper );
+				this.helpers[ object.id ] = helper;
+
+				this.signals.helperAdded.dispatch( helper );
+
+			}
+
+		};
+
+	}(),
 
 	removeHelper: function ( object ) {
 
@@ -211,17 +242,7 @@ Editor.prototype = {
 
 	selectById: function ( id ) {
 
-		var scope = this;
-
-		this.scene.traverse( function ( node ) {
-
-			if ( node.id === id ) {
-
-				scope.select( node );
-
-			}
-
-		} );
+		this.select( this.scene.getObjectById( id ) );
 
 	},
 

editor/js/Menubar.Add.js

@@ -36,7 +36,7 @@ Menubar.Add = function ( editor ) {
 		var heightSegments = 1;
 
 		var geometry = new THREE.PlaneGeometry( width, height, widthSegments, heightSegments );
-		var material = new THREE.MeshLambertMaterial();
+		var material = new THREE.MeshPhongMaterial();
 		var mesh = new THREE.Mesh( geometry, material );
 		mesh.name = 'Plane ' + ( ++ meshCount );
 
@@ -64,7 +64,7 @@ Menubar.Add = function ( editor ) {
 		var depthSegments = 1;
 
 		var geometry = new THREE.CubeGeometry( width, height, depth, widthSegments, heightSegments, depthSegments );
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
 		mesh.name = 'Cube ' + ( ++ meshCount );
 
 		editor.addObject( mesh );
@@ -88,7 +88,7 @@ Menubar.Add = function ( editor ) {
 		var openEnded = false;
 
 		var geometry = new THREE.CylinderGeometry( radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded );
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
 		mesh.name = 'Cylinder ' + ( ++ meshCount );
 
 		editor.addObject( mesh );
@@ -109,7 +109,7 @@ Menubar.Add = function ( editor ) {
 		var heightSegments = 16;
 
 		var geometry = new THREE.SphereGeometry( radius, widthSegments, heightSegments );
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
 		mesh.name = 'Sphere ' + ( ++ meshCount );
 
 		editor.addObject( mesh );
@@ -129,7 +129,7 @@ Menubar.Add = function ( editor ) {
 		var detail = 2;
 
 		var geometry = new THREE.IcosahedronGeometry ( radius, detail );
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
 		mesh.name = 'Icosahedron ' + ( ++ meshCount );
 
 		editor.addObject( mesh );
@@ -152,7 +152,7 @@ Menubar.Add = function ( editor ) {
 		var arc = Math.PI * 2;
 
 		var geometry = new THREE.TorusGeometry( radius, tube, radialSegments, tubularSegments, arc );
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
 		mesh.name = 'Torus ' + ( ++ meshCount );
 
 		editor.addObject( mesh );
@@ -177,7 +177,7 @@ Menubar.Add = function ( editor ) {
 		var heightScale = 1;
 
 		var geometry = new THREE.TorusKnotGeometry( radius, tube, radialSegments, tubularSegments, p, q, heightScale );
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial() );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
 		mesh.name = 'TorusKnot ' + ( ++ meshCount );
 
 		editor.addObject( mesh );

editor/js/Viewport.js

@@ -288,13 +288,13 @@ var Viewport = function ( editor ) {
 
 	signals.helperAdded.add( function ( object ) {
 
-		objects.push( object );
+		objects.push( object.getObjectByName( 'picker' ) );
 
 	} );
 
 	signals.helperRemoved.add( function ( object ) {
 
-		objects.splice( objects.indexOf( object ), 1 );
+		objects.splice( objects.indexOf( object.getObjectByName( 'picker' ) ), 1 );
 
 	} );
 

src/extras/helpers/DirectionalLightHelper.js

@@ -3,51 +3,56 @@
  * @author mrdoob / http://mrdoob.com/
  */
 
-THREE.DirectionalLightHelper = function ( light, sphereSize ) {
+THREE.DirectionalLightHelper = function ( light, size ) {
 
 	THREE.Object3D.call( this );
 
-	this.matrixAutoUpdate = false;
-
 	this.light = light;
+	this.light.updateMatrixWorld();
 
-	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.matrixWorld = light.matrixWorld;
+	this.matrixAutoUpdate = false;
 
-	this.lightSphere = new THREE.Mesh( geometry, material );
-	this.lightSphere.matrixWorld = this.light.matrixWorld;
-	this.lightSphere.matrixAutoUpdate = false;
-	this.add( this.lightSphere );
+	var geometry = new THREE.PlaneGeometry( size, size );
+	var material = new THREE.MeshBasicMaterial( { wireframe: true, fog: false } );
+	material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
-	/*
-	this.targetSphere = new THREE.Mesh( geometry, material );
-	this.targetSphere.position = this.light.target.position;
-	this.add( this.targetSphere );
-	*/
+	this.lightPlane = new THREE.Mesh( geometry, material );
+	this.add( this.lightPlane );
 
 	geometry = new THREE.Geometry();
-	geometry.vertices.push( this.light.position );
-	geometry.vertices.push( this.light.target.position );
+	geometry.vertices.push( new THREE.Vector3() );
+	geometry.vertices.push( new THREE.Vector3() );
 	geometry.computeLineDistances();
 
-	material = new THREE.LineDashedMaterial( { dashSize: 4, gapSize: 4, opacity: 0.75, transparent: true, fog: false } );
+	material = new THREE.LineBasicMaterial( { fog: false } );
 	material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
 	this.targetLine = new THREE.Line( geometry, material );
 	this.add( this.targetLine );
 
-}
+	this.update();
+
+};
 
 THREE.DirectionalLightHelper.prototype = Object.create( THREE.Object3D.prototype );
 
 THREE.DirectionalLightHelper.prototype.update = function () {
 
-	this.lightSphere.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+	var vector = new THREE.Vector3();
 
-	this.targetLine.geometry.computeLineDistances();
-	this.targetLine.geometry.verticesNeedUpdate = true;
-	this.targetLine.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+	return function () {
 
-};
+		vector.getPositionFromMatrix( this.light.matrixWorld ).negate();
+
+		this.lightPlane.lookAt( vector );
+		this.lightPlane.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+
+		this.targetLine.geometry.vertices[ 1 ].copy( vector );
+		this.targetLine.geometry.verticesNeedUpdate = true;
+		this.targetLine.material.color.copy( this.lightPlane.material.color );
+
+	}
+
+}();
 

src/extras/helpers/HemisphereLightHelper.js

@@ -8,37 +8,46 @@ THREE.HemisphereLightHelper = function ( light, sphereSize, arrowLength, domeSiz
 	THREE.Object3D.call( this );
 
 	this.light = light;
+	this.light.updateMatrixWorld();
+
+	this.matrixWorld = light.matrixWorld;
+	this.matrixAutoUpdate = false;
+
+	this.colors = [ new THREE.Color(), new THREE.Color() ];
 
 	var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
 	geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
 
 	for ( var i = 0, il = 8; i < il; i ++ ) {
 
-		geometry.faces[ i ].materialIndex = i < 4 ? 0 : 1;
+		geometry.faces[ i ].color = this.colors[ i < 4 ? 0 : 1 ];
 
 	}
 
-	var materialSky = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
-	materialSky.color.copy( light.color ).multiplyScalar( light.intensity );
-
-	var materialGround = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
-	materialGround.color.copy( light.groundColor ).multiplyScalar( light.intensity );
+	var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, wireframe: true } );
 
-	this.lightSphere = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( [ materialSky, materialGround ] ) );
-	this.lightSphere.position = light.position;
-	this.lightSphere.lookAt( new THREE.Vector3() );
+	this.lightSphere = new THREE.Mesh( geometry, material );
 	this.add( this.lightSphere );
 
+	this.update();
+
 };
 
 THREE.HemisphereLightHelper.prototype = Object.create( THREE.Object3D.prototype );
 
 THREE.HemisphereLightHelper.prototype.update = function () {
 
-	this.lightSphere.lookAt( new THREE.Vector3() );
+	var vector = 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 );
+	return function () {
 
-};
+		this.colors[ 0 ].copy( this.light.color ).multiplyScalar( this.light.intensity );
+		this.colors[ 1 ].copy( this.light.groundColor ).multiplyScalar( this.light.intensity );
+
+		this.lightSphere.lookAt( vector.getPositionFromMatrix( this.light.matrixWorld ).negate() );
+		this.lightSphere.geometry.colorsNeedUpdate = true;
+
+	}
+
+}();
 

src/extras/helpers/PointLightHelper.js

@@ -6,9 +6,10 @@
 THREE.PointLightHelper = function ( light, sphereSize ) {
 
 	this.light = light;
+	this.light.updateMatrixWorld();
 
 	var geometry = new THREE.SphereGeometry( sphereSize, 4, 2 );
-	var material = new THREE.MeshBasicMaterial( { fog: false, wireframe: true } );
+	var material = new THREE.MeshBasicMaterial( { wireframe: true, fog: false } );
 	material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
 	THREE.Mesh.call( this, geometry, material );

src/extras/helpers/SpotLightHelper.js

@@ -6,50 +6,45 @@
 
 THREE.SpotLightHelper = function ( light ) {
 
-	// spotlight helper must be a child of the scene
+	THREE.Object3D.call( this );
 
 	this.light = light;
+	this.light.updateMatrixWorld();
+
+	this.matrixWorld = light.matrixWorld;
+	this.matrixAutoUpdate = false;
 
 	var geometry = new THREE.CylinderGeometry( 0, 1, 1, 8, 1, true );
 
 	geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, -0.5, 0 ) );
-
 	geometry.applyMatrix( new THREE.Matrix4().makeRotationX( - Math.PI / 2 ) );
 
-	var material = new THREE.MeshBasicMaterial( { wireframe: true, opacity: 0.3, transparent: true } );
-
-	THREE.Mesh.call( this, geometry, material );
+	var material = new THREE.MeshBasicMaterial( { wireframe: true, fog: false } );
+	
+	this.cone = new THREE.Mesh( geometry, material );
+	this.add( this.cone );
 
 	this.update();
 
 };
 
-THREE.SpotLightHelper.prototype = Object.create( THREE.Mesh.prototype );
+THREE.SpotLightHelper.prototype = Object.create( THREE.Object3D.prototype );
 
-THREE.SpotLightHelper.prototype.update = ( function () {
+THREE.SpotLightHelper.prototype.update = function () {
 
-	var targetPosition = new THREE.Vector3();
+	var vector = new THREE.Vector3();
 
-	return function() {
+	return function () {
 
 		var coneLength = this.light.distance ? this.light.distance : 10000;
-
 		var coneWidth = coneLength * Math.tan( this.light.angle );
 
-		this.scale.set( coneWidth, coneWidth, coneLength );
-
-		this.light.updateMatrixWorld( true );
-
-		this.position.getPositionFromMatrix( this.light.matrixWorld );
-
-		this.light.target.updateMatrixWorld( true );
-
-		targetPosition.getPositionFromMatrix( this.light.target.matrixWorld );
+		this.cone.scale.set( coneWidth, coneWidth, coneLength );
 
-		this.lookAt( targetPosition );
+		this.cone.lookAt( vector.getPositionFromMatrix( this.light.matrixWorld ).negate() );
 
-		this.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
+		this.cone.material.color.copy( this.light.color ).multiplyScalar( this.light.intensity );
 
 	}
 
-}());
+}();