Editor: Improved UI.Texture and UI.CubeTexture.

editor/js/Sidebar.Material.js

@@ -146,7 +146,7 @@ Sidebar.Material = function ( editor ) {
 
 	var materialMapRow = new UI.Panel();
 	var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
+	var materialMap = new UI.Texture().setColor( '#444' ).onChange( update );
 
 	materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialMapRow.add( materialMapEnabled );
@@ -159,7 +159,7 @@ Sidebar.Material = function ( editor ) {
 
 	var materialLightMapRow = new UI.Panel();
 	var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialLightMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
+	var materialLightMap = new UI.Texture().setColor( '#444' ).onChange( update );
 
 	materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialLightMapRow.add( materialLightMapEnabled );
@@ -172,13 +172,13 @@ Sidebar.Material = function ( editor ) {
 
 	var materialBumpMapRow = new UI.Panel();
 	var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialBumpMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
+	var materialBumpMap = new UI.Texture().setColor( '#444' ).onChange( update );
 	var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
 	materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialBumpMapRow.add( materialBumpMapEnabled );
-	materialBumpMapRow.add( materialBumpScale );
 	materialBumpMapRow.add( materialBumpMap );
+	materialBumpMapRow.add( materialBumpScale );
 
 	container.add( materialBumpMapRow );
 
@@ -187,7 +187,7 @@ Sidebar.Material = function ( editor ) {
 
 	var materialNormalMapRow = new UI.Panel();
 	var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialNormalMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
+	var materialNormalMap = new UI.Texture().setColor( '#444' ).onChange( update );
 
 	materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialNormalMapRow.add( materialNormalMapEnabled );
@@ -200,7 +200,7 @@ Sidebar.Material = function ( editor ) {
 
 	var materialSpecularMapRow = new UI.Panel();
 	var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialSpecularMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
+	var materialSpecularMap = new UI.Texture().setColor( '#444' ).onChange( update );
 
 	materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialSpecularMapRow.add( materialSpecularMapEnabled );
@@ -213,13 +213,13 @@ Sidebar.Material = function ( editor ) {
 
 	var materialEnvMapRow = new UI.Panel();
 	var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
-	var materialEnvMap = new UI.CubeTexture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
+	var materialEnvMap = new UI.CubeTexture().setColor( '#444' ).onChange( update );
 	var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
 	materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialEnvMapRow.add( materialEnvMapEnabled );
-	materialEnvMapRow.add( materialReflectivity );
 	materialEnvMapRow.add( materialEnvMap );
+	materialEnvMapRow.add( materialReflectivity );
 
 	container.add( materialEnvMapRow );
 

editor/js/libs/ui.three.js

@@ -1,21 +1,28 @@
 // Texture
 
-UI.Texture = function ( position ) {
+UI.Texture = function () {
 
     UI.Element.call( this );
 
 	var scope = this;
 
-	var image = new Image();
-	this.texture = null;
+	var canvas = document.createElement( 'canvas' );
+	canvas.width = 64;
+	canvas.height = 16;
+	canvas.style.cursor = 'pointer';
+	canvas.addEventListener( 'click', function ( event ) {
 
-	this.dom = document.createElement( 'input' );
-	this.dom.type = 'file';
-	this.dom.style.position = position || 'relative';
+		input.click();
 
-	this.onChangeCallback = null;
+	}, false );
+
+	var context = canvas.getContext( '2d' );
+	context.fillStyle = 'black';
+	context.fillRect( 0, 0, canvas.width, canvas.height );
 
-	this.dom.addEventListener( 'change', function ( event ) {
+	var input = document.createElement( 'input' );
+	input.type = 'file';
+	input.addEventListener( 'change', function ( event ) {
 
 		var file = event.target.files[ 0 ];
 
@@ -27,31 +34,12 @@ UI.Texture = function ( position ) {
 				var image = document.createElement( 'img' );
 				image.addEventListener( 'load', function( event ) {
 
-					scope.texture = new THREE.Texture( this );
-					scope.texture.needsUpdate = true;
-
-					// remember the original filename (including extension)
-					// this is used for url field in the scene export
+					var scale = 64 / this.width;
 
-					scope.texture.sourceFile = file.name;
+					context.drawImage( this, 0, 0, this.width * scale, this.height * scale );
 
-					// generate unique name per texture
-					// based on source file name
-
-					var chunks = file.name.split( '.' );
-					var extension = chunks.pop().toLowerCase();
-					var filename = chunks.join( '.' );
-
-					if ( ! ( filename in scope.textureNameMap ) ) {
-
-						scope.textureNameMap[ filename ] = true;
-						scope.texture.name = filename;
-
-					} else {
-
-						scope.texture.name = filename + "_" + scope.texture.id;
-
-					}
+					scope.texture = new THREE.Texture( this );
+					scope.texture.needsUpdate = true;
 
 					if ( scope.onChangeCallback ) scope.onChangeCallback();
 
@@ -65,7 +53,11 @@ UI.Texture = function ( position ) {
 
 		}
 
-	}, false );
+	} );
+
+	this.dom = canvas;
+	this.texture = null;
+	this.onChangeCallback = null;
 
 	return this;
 
@@ -98,21 +90,29 @@ UI.Texture.prototype.onChange = function ( callback ) {
 
 // CubeTexture
 
-UI.CubeTexture = function ( position ) {
+UI.CubeTexture = function () {
 
 	UI.Element.call( this );
 
 	var scope = this;
 
-	this.texture = null;
+	var canvas = document.createElement( 'canvas' );
+	canvas.width = 64;
+	canvas.height = 16;
+	canvas.style.cursor = 'pointer';
+	canvas.addEventListener( 'click', function ( event ) {
 
-	this.dom = document.createElement( 'input' );
-	this.dom.type = 'file';
-	this.dom.style.position = position || 'relative';
+		input.click();
 
-	this.onChangeCallback = null;
+	}, false );
+
+	var context = canvas.getContext( '2d' );
+	context.fillStyle = 'black';
+	context.fillRect( 0, 0, canvas.width, canvas.height );
 
-	this.dom.addEventListener( 'change', function ( event ) {
+	var input = document.createElement( 'input' );
+	input.type = 'file';
+	input.addEventListener( 'change', function ( event ) {
 
 		var file = event.target.files[ 0 ];
 
@@ -124,6 +124,10 @@ UI.CubeTexture = function ( position ) {
 				var image = document.createElement( 'img' );
 				image.addEventListener( 'load', function( event ) {
 
+					var scale = 64 / this.width;
+
+					context.drawImage( this, 0, 0, this.width * scale, this.height * scale );
+
 					scope.texture = new THREE.Texture( [ this, this, this, this, this, this ], new THREE.CubeReflectionMapping() )
 					scope.texture.needsUpdate = true;
 
@@ -139,6 +143,10 @@ UI.CubeTexture = function ( position ) {
 
 	}, false );
 
+	this.dom = canvas;
+	this.texture = null;
+	this.onChangeCallback = null;
+
 	return this;
 
 };