Editor: changed outliner to use FancySelect for nicer styling (using custom DOM instead of <select> element).

Work-in-progress, still some weirdness occurring.

build/three.js

@@ -6396,7 +6396,6 @@ THREE.DirectionalLight = function ( hex, intensity, distance ) {
 
 	this.position = new THREE.Vector3( 0, 1, 0 );
 	this.target = new THREE.Object3D();
-	this.target.name = "Light target";
 
 	this.intensity = ( intensity !== undefined ) ? intensity : 1;
 	this.distance = ( distance !== undefined ) ? distance : 0;
@@ -6490,7 +6489,6 @@ THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) {
 
 	this.position = new THREE.Vector3( 0, 1, 0 );
 	this.target = new THREE.Object3D();
-	this.target.name = "Light target";
 
 	this.intensity = ( intensity !== undefined ) ? intensity : 1;
 	this.distance = ( distance !== undefined ) ? distance : 0;

build/three.min.js

@@ -135,11 +135,11 @@ THREE.PerspectiveCamera=function(a,b,c,d){THREE.Camera.call(this);this.fov=void
 THREE.PerspectiveCamera.prototype.setViewOffset=function(a,b,c,d,e,f){this.fullWidth=a;this.fullHeight=b;this.x=c;this.y=d;this.width=e;this.height=f;this.updateProjectionMatrix()};
 THREE.PerspectiveCamera.prototype.updateProjectionMatrix=function(){if(this.fullWidth){var a=this.fullWidth/this.fullHeight,b=Math.tan(this.fov*Math.PI/360)*this.near,c=-b,d=a*c,a=Math.abs(a*b-d),c=Math.abs(b-c);this.projectionMatrix.makeFrustum(d+this.x*a/this.fullWidth,d+(this.x+this.width)*a/this.fullWidth,b-(this.y+this.height)*c/this.fullHeight,b-this.y*c/this.fullHeight,this.near,this.far)}else this.projectionMatrix.makePerspective(this.fov,this.aspect,this.near,this.far)};
 THREE.Light=function(a){THREE.Object3D.call(this);this.color=new THREE.Color(a)};THREE.Light.prototype=Object.create(THREE.Object3D.prototype);THREE.AmbientLight=function(a){THREE.Light.call(this,a)};THREE.AmbientLight.prototype=Object.create(THREE.Light.prototype);
-THREE.DirectionalLight=function(a,b,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.target=new THREE.Object3D;this.target.name="Light target";this.intensity=void 0!==b?b:1;this.distance=void 0!==c?c:0;this.onlyShadow=this.castShadow=!1;this.shadowCameraNear=50;this.shadowCameraFar=5E3;this.shadowCameraLeft=-500;this.shadowCameraTop=this.shadowCameraRight=500;this.shadowCameraBottom=-500;this.shadowCameraVisible=!1;this.shadowBias=0;this.shadowDarkness=0.5;this.shadowMapHeight=
-this.shadowMapWidth=512;this.shadowCascade=!1;this.shadowCascadeOffset=new THREE.Vector3(0,0,-1E3);this.shadowCascadeCount=2;this.shadowCascadeBias=[0,0,0];this.shadowCascadeWidth=[512,512,512];this.shadowCascadeHeight=[512,512,512];this.shadowCascadeNearZ=[-1,0.99,0.998];this.shadowCascadeFarZ=[0.99,0.998,1];this.shadowCascadeArray=[];this.shadowMatrix=this.shadowCamera=this.shadowMapSize=this.shadowMap=null};THREE.DirectionalLight.prototype=Object.create(THREE.Light.prototype);
+THREE.DirectionalLight=function(a,b,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.target=new THREE.Object3D;this.intensity=void 0!==b?b:1;this.distance=void 0!==c?c:0;this.onlyShadow=this.castShadow=!1;this.shadowCameraNear=50;this.shadowCameraFar=5E3;this.shadowCameraLeft=-500;this.shadowCameraTop=this.shadowCameraRight=500;this.shadowCameraBottom=-500;this.shadowCameraVisible=!1;this.shadowBias=0;this.shadowDarkness=0.5;this.shadowMapHeight=this.shadowMapWidth=512;this.shadowCascade=
+!1;this.shadowCascadeOffset=new THREE.Vector3(0,0,-1E3);this.shadowCascadeCount=2;this.shadowCascadeBias=[0,0,0];this.shadowCascadeWidth=[512,512,512];this.shadowCascadeHeight=[512,512,512];this.shadowCascadeNearZ=[-1,0.99,0.998];this.shadowCascadeFarZ=[0.99,0.998,1];this.shadowCascadeArray=[];this.shadowMatrix=this.shadowCamera=this.shadowMapSize=this.shadowMap=null};THREE.DirectionalLight.prototype=Object.create(THREE.Light.prototype);
 THREE.HemisphereLight=function(a,b,c){THREE.Light.call(this,a);this.groundColor=new THREE.Color(b);this.position=new THREE.Vector3(0,100,0);this.intensity=void 0!==c?c:1};THREE.HemisphereLight.prototype=Object.create(THREE.Light.prototype);THREE.PointLight=function(a,b,c){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,0,0);this.intensity=void 0!==b?b:1;this.distance=void 0!==c?c:0};THREE.PointLight.prototype=Object.create(THREE.Light.prototype);
-THREE.SpotLight=function(a,b,c,d,e){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.target=new THREE.Object3D;this.target.name="Light target";this.intensity=void 0!==b?b:1;this.distance=void 0!==c?c:0;this.angle=void 0!==d?d:Math.PI/2;this.exponent=void 0!==e?e:10;this.onlyShadow=this.castShadow=!1;this.shadowCameraNear=50;this.shadowCameraFar=5E3;this.shadowCameraFov=50;this.shadowCameraVisible=!1;this.shadowBias=0;this.shadowDarkness=0.5;this.shadowMapHeight=this.shadowMapWidth=
-512;this.shadowMatrix=this.shadowCamera=this.shadowMapSize=this.shadowMap=null};THREE.SpotLight.prototype=Object.create(THREE.Light.prototype);THREE.Loader=function(a){this.statusDomElement=(this.showStatus=a)?THREE.Loader.prototype.addStatusElement():null;this.onLoadStart=function(){};this.onLoadProgress=function(){};this.onLoadComplete=function(){}};
+THREE.SpotLight=function(a,b,c,d,e){THREE.Light.call(this,a);this.position=new THREE.Vector3(0,1,0);this.target=new THREE.Object3D;this.intensity=void 0!==b?b:1;this.distance=void 0!==c?c:0;this.angle=void 0!==d?d:Math.PI/2;this.exponent=void 0!==e?e:10;this.onlyShadow=this.castShadow=!1;this.shadowCameraNear=50;this.shadowCameraFar=5E3;this.shadowCameraFov=50;this.shadowCameraVisible=!1;this.shadowBias=0;this.shadowDarkness=0.5;this.shadowMapHeight=this.shadowMapWidth=512;this.shadowMatrix=this.shadowCamera=
+this.shadowMapSize=this.shadowMap=null};THREE.SpotLight.prototype=Object.create(THREE.Light.prototype);THREE.Loader=function(a){this.statusDomElement=(this.showStatus=a)?THREE.Loader.prototype.addStatusElement():null;this.onLoadStart=function(){};this.onLoadProgress=function(){};this.onLoadComplete=function(){}};
 THREE.Loader.prototype={constructor:THREE.Loader,crossOrigin:"anonymous",addStatusElement:function(){var a=document.createElement("div");a.style.position="absolute";a.style.right="0px";a.style.top="0px";a.style.fontSize="0.8em";a.style.textAlign="left";a.style.background="rgba(0,0,0,0.25)";a.style.color="#fff";a.style.width="120px";a.style.padding="0.5em 0.5em 0.5em 0.5em";a.style.zIndex=1E3;a.innerHTML="Loading ...";return a},updateProgress:function(a){var b="Loaded ",b=a.total?b+((100*a.loaded/
 a.total).toFixed(0)+"%"):b+((a.loaded/1E3).toFixed(2)+" KB");this.statusDomElement.innerHTML=b},extractUrlBase:function(a){a=a.split("/");a.pop();return(1>a.length?".":a.join("/"))+"/"},initMaterials:function(a,b,c){a.materials=[];for(var d=0;d<b.length;++d)a.materials[d]=THREE.Loader.prototype.createMaterial(b[d],c)},hasNormals:function(a){var b,c,d=a.materials.length;for(c=0;c<d;c++)if(b=a.materials[c],b instanceof THREE.ShaderMaterial)return!0;return!1},createMaterial:function(a,b){function c(a){a=
 Math.log(a)/Math.LN2;return Math.floor(a)==a}function d(a){a=Math.log(a)/Math.LN2;return Math.pow(2,Math.round(a))}function e(a,e,f,h,i,j,r){var t=f.toLowerCase().endsWith(".dds"),u=b+"/"+f;if(t){var v=THREE.ImageUtils.loadCompressedTexture(u);a[e]=v}else v=document.createElement("canvas"),a[e]=new THREE.Texture(v);a[e].sourceFile=f;if(h&&(a[e].repeat.set(h[0],h[1]),1!==h[0]&&(a[e].wrapS=THREE.RepeatWrapping),1!==h[1]))a[e].wrapT=THREE.RepeatWrapping;i&&a[e].offset.set(i[0],i[1]);if(j&&(f={repeat:THREE.RepeatWrapping,

editor/index.html

@@ -15,6 +15,24 @@
 				border-top: 1px solid #ccc;
 			}
 
+			.fancy_select {
+				background: #fff;
+				border: 1px solid #ccc;
+				padding: 0;
+				cursor: default;
+				overflow: auto;
+			}
+
+			.option_item {
+				padding: 0 0.25em;
+			}
+
+			.option_selected {
+				background: #000;
+				color: #fff;
+			}
+
+			.object_type { color: #aaa }
 		</style>
 	</head>
 	<body>

editor/js/UI.js

@@ -396,6 +396,119 @@ UI.Select.prototype.onChange = function ( callback ) {
 
 };
 
+// FancySelect
+
+UI.FancySelect = function ( position ) {
+
+	UI.Element.call( this );
+
+	var scope = this;
+
+	this.dom = document.createElement( 'div' );
+	this.dom.className = "fancy_select";
+	this.dom.style.position = position || 'relative';
+
+	this.onChangeCallback = null;
+
+	this.options = [];
+	this.selectedValue = null;
+
+	return this;
+
+};
+
+UI.FancySelect.prototype = Object.create( UI.Element.prototype );
+
+UI.FancySelect.prototype.setOptions = function ( options ) {
+
+	var scope = this;
+
+	while ( scope.dom.children.length > 0 ) {
+
+		scope.dom.removeChild( scope.dom.firstChild );
+
+	}
+
+	scope.options = [];
+
+	var generateOptionCallback = function ( element, value ) {
+
+		return function ( event ) {
+
+			for ( var i = 0; i < scope.options.length; i ++ ) {
+
+				scope.options[ i ].className = "";
+
+			}
+
+			element.className = "option_selected";
+
+			scope.selectedValue = value;
+
+			if ( scope.onChangeCallback ) scope.onChangeCallback();
+
+		}
+
+	};
+
+	for ( var key in options ) {
+
+		var option = document.createElement( 'div' );
+		option.innerHTML = options[ key ];
+		option.value = key;
+		scope.dom.appendChild( option );
+
+		scope.options.push( option );
+		option.addEventListener( 'click', generateOptionCallback( option, key ), false );
+
+	}
+
+	return scope;
+
+};
+
+UI.FancySelect.prototype.getValue = function () {
+
+	return this.selectedValue;
+
+};
+
+UI.FancySelect.prototype.setValue = function ( value ) {
+
+	// must convert raw value into string for compatibility with UI.Select
+	// which uses string values (initialized from options keys)
+
+	var key = value ? value.toString() : value;
+
+	for ( var i = 0; i < this.options.length; i ++ ) {
+
+		var element = this.options[ i ];
+
+		if ( element.value === key ) {
+
+			element.className = "option_selected";
+
+		} else {
+
+			element.className = "";
+
+		}
+
+	}
+
+	this.selectedValue = value;
+
+	return this;
+
+};
+
+UI.FancySelect.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};
 
 // Checkbox
 

editor/js/ui/Sidebar.Outliner.js

@@ -1,6 +1,6 @@
 Sidebar.Outliner = function ( signals ) {
 
-	var objects = {
+	var objectTypes = {
 
 		'PerspectiveCamera': THREE.PerspectiveCamera,
 		'PointLight': THREE.PointLight,
@@ -19,7 +19,8 @@ Sidebar.Outliner = function ( signals ) {
 	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
-	var sceneGraph = new UI.Select().setMultiple( true ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	//var sceneGraph = new UI.Select().setMultiple( true ).setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	var sceneGraph = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 	container.add( sceneGraph );
 
 	container.add( new UI.Break() );
@@ -45,11 +46,11 @@ Sidebar.Outliner = function ( signals ) {
 
 	}
 
-	function getObjectInstanceName( object ) {
+	function getObjectType( object ) {
 
-		for ( var key in objects ) {
+		for ( var type in objectTypes ) {
 
-			if ( object instanceof objects[ key ] ) return key;
+			if ( object instanceof objectTypes[ type ] ) return type;
 
 		}
 
@@ -75,7 +76,7 @@ Sidebar.Outliner = function ( signals ) {
 
 				var child = object.children[ key ];
 
-				options[ child.id ] = pad + '+ ' + child.name + ' [' + getObjectInstanceName( child ) + ']';
+				options[ child.id ] = '<div class="option_item">'+pad + '+ ' + child.name + ' <span class="object_type">[' + getObjectType( child ) + ']</span></div>';
 
 				createList( child, pad + '&nbsp;&nbsp;&nbsp;' );
 
@@ -89,7 +90,7 @@ Sidebar.Outliner = function ( signals ) {
 
 	signals.objectSelected.add( function ( object ) {
 
-		sceneGraph.setValue( object !== null ? object.id: null );
+		sceneGraph.setValue( object !== null ? object.id : null );
 
 	} );
 

editor/js/ui/Viewport.js

@@ -62,17 +62,25 @@ var Viewport = function ( signals ) {
 	controls.dynamicDampingFactor = 0.3;
 	controls.addEventListener( 'change', render );
 
-	var light = new THREE.DirectionalLight( 0xffffff );
-	light.position.set( 1, 0.5, 0 ).normalize();
-	scene.add( light );
+	var light1 = new THREE.DirectionalLight( 0xffffff );
+	light1.position.set( 1, 0.5, 0 ).normalize();
+	scene.add( light1 );
 
-	light.name = "Directional light #1";
+	var light2 = new THREE.DirectionalLight( 0xffffff, 0.5 );
+	light2.position.set( - 1, - 0.5, 0 ).normalize();
+	scene.add( light2 );
 
-	var light = new THREE.DirectionalLight( 0xffffff, 0.5 );
-	light.position.set( - 1, - 0.5, 0 ).normalize();
-	scene.add( light );
+	// default objects names
 
-	light.name = "Directional light #2";
+	camera.name = "Camera";
+
+	light1.name = "Light #1";
+	light1.target.name = "Light #1 target";
+
+	light2.name = "Light #2";
+	light2.target.name = "Light #2 target";
+
+	//
 
 	signals.sceneChanged.dispatch( scene );
 

src/lights/DirectionalLight.js

@@ -9,7 +9,6 @@ THREE.DirectionalLight = function ( hex, intensity, distance ) {
 
 	this.position = new THREE.Vector3( 0, 1, 0 );
 	this.target = new THREE.Object3D();
-	this.target.name = "Light target";
 
 	this.intensity = ( intensity !== undefined ) ? intensity : 1;
 	this.distance = ( distance !== undefined ) ? distance : 0;

src/lights/SpotLight.js

@@ -8,7 +8,6 @@ THREE.SpotLight = function ( hex, intensity, distance, angle, exponent ) {
 
 	this.position = new THREE.Vector3( 0, 1, 0 );
 	this.target = new THREE.Object3D();
-	this.target.name = "Light target";
 
 	this.intensity = ( intensity !== undefined ) ? intensity : 1;
 	this.distance = ( distance !== undefined ) ? distance : 0;