Browse Source

Editor: Added material.endMap, or so I think

Mr.doob 13 years ago
parent
commit
1bf08ec3f5
2 changed files with 76 additions and 8 deletions
  1. 73 1
      editor/js/UI.three.js
  2. 3 7
      editor/js/ui/Sidebar.Properties.Material.js

+ 73 - 1
editor/js/UI.three.js

@@ -2,7 +2,7 @@
 
 UI.Texture = function ( position ) {
 
-	UI.Element.call( this );
+    UI.Element.call( this );
 
 	var scope = this;
 
@@ -68,3 +68,75 @@ UI.Texture.prototype.onChange = function ( callback ) {
 	return this;
 
 };
+
+
+// CubeTexture
+
+UI.CubeTexture = function ( position ) {
+
+	UI.Element.call( this );
+
+	var scope = this;
+
+	this.texture = new THREE.Texture( [], new THREE.CubeReflectionMapping() );
+
+	this.dom = document.createElement( 'input' );
+	this.dom.type = 'file';
+	this.dom.style.position = position || 'relative';
+	this.dom.style.marginTop = '-2px';
+	this.dom.style.marginLeft = '-2px';
+
+	this.onChangeCallback = null;
+
+	this.dom.addEventListener( 'change', function ( event ) {
+
+		var file = event.target.files[ 0 ];
+
+		if ( file.type.match( 'image.*' ) ) {
+
+			var reader = new FileReader();
+			reader.addEventListener( 'load', function ( event ) {
+
+				var image = document.createElement( 'img' );
+				image.addEventListener( 'load', function( event ) {
+
+					scope.texture.image = [ this, this, this, this, this, this ];
+					scope.texture.needsUpdate = true;
+
+					if ( scope.onChangeCallback ) scope.onChangeCallback();
+
+				}, false );
+				image.src = event.target.result;
+
+			}, false );
+			reader.readAsDataURL( file );
+
+		}
+
+	}, false );
+
+	return this;
+
+};
+
+UI.CubeTexture.prototype = Object.create( UI.Element.prototype );
+
+UI.CubeTexture.prototype.getValue = function () {
+
+	return this.texture;
+
+};
+
+UI.CubeTexture.prototype.setValue = function ( value ) {
+
+	this.texture = value;
+
+};
+
+UI.CubeTexture.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};

+ 3 - 7
editor/js/ui/Sidebar.Properties.Material.js

@@ -1,6 +1,6 @@
 Sidebar.Properties.Material = function ( signals ) {
 
-	var materials = {
+    var materials = {
 
 		'LineBasicMaterial': THREE.LineBasicMaterial,
 		'MeshBasicMaterial': THREE.MeshBasicMaterial,
@@ -169,7 +169,7 @@ Sidebar.Properties.Material = function ( signals ) {
 
 	var materialEnvMapRow = new UI.Panel();
 	var materialEnvMapEnabled = new UI.Checkbox( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialEnvMap = new UI.Texture( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
+	var materialEnvMap = new UI.CubeTexture( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
 
 	materialEnvMapRow.add( new UI.Text().setValue( 'Env Map' ).setColor( '#666' ) );
 	materialEnvMapRow.add( materialEnvMapEnabled );
@@ -306,14 +306,12 @@ Sidebar.Properties.Material = function ( signals ) {
 
 			}
 
-			/*
 			if ( material.envMap !== undefined ) {
 
 				material.envMap = materialEnvMapEnabled.getValue() === true ? materialEnvMap.getValue() : null;
 				material.needsUpdate = true;
 
 			}
-			*/
 
 			if ( material.opacity !== undefined ) {
 
@@ -512,7 +510,6 @@ Sidebar.Properties.Material = function ( signals ) {
 
 			}
 
-			/*
 			if ( material.envMap !== undefined ) {
 
 				if ( material.envMap !== null ) {
@@ -528,7 +525,6 @@ Sidebar.Properties.Material = function ( signals ) {
 				}
 
 			}
-			*/
 
 			if ( material.opacity !== undefined ) {
 
@@ -568,4 +564,4 @@ Sidebar.Properties.Material = function ( signals ) {
 
 	return container;
 
-}
+}