Texture Export

Added texture and image export to the Object3D.js. Works with the scene
export inside the editor.

Extended the .toJson() to safe the texture inside the .json file as a
base64 format.

Big images >2048 are converted to jpg with to keep the size smaller.
For others you can still use the alpha channel of pigs.

src/core/Object3D.js

@@ -3,6 +3,7 @@
  * @author mikael emtinger / http://gomo.se/
  * @author alteredq / http://alteredqualia.com/
  * @author WestLangley / http://github.com/WestLangley
+ * @author elephantatwork / www.elephantatwork.ch
  */
 
 THREE.Object3D = function () {
@@ -569,6 +570,39 @@ THREE.Object3D.prototype = {
 
 	toJSON: function( meta ) {
 
+		var textures = [];
+		var images = [];
+
+		var parseTexture = function ( texture ) {
+
+			console.log(texture);
+
+
+			if ( meta.textures === undefined ) {
+
+				meta.textures = [];
+				meta.images = [];
+			}
+			
+			if ( textures[ texture.uuid ] === undefined ) {
+
+				var json = texture.toJSON();
+				var jsonImage = texture.toJSONImage(json.image);
+
+				delete json.metadata;
+				delete jsonImage.metadata;
+
+				textures[ texture.uuid ] = json;
+				images[ texture.uuid ] = jsonImage;
+
+				meta.textures.push( json );
+				meta.images.push(jsonImage);
+			}
+
+			return texture.uuid;
+
+		};
+
 		var isRootObject = ( meta === undefined );
 
 		// we will store all serialization data on 'data'
@@ -583,12 +617,14 @@ THREE.Object3D.prototype = {
 			// initialize meta obj
 			meta = {
 				geometries: {},
-				materials: {}
+				materials: {},
+				textures: [],
+				images: []
 			};
 
 			// add metadata
 			metadata = {
-				version: 4.4,
+				version: 4.41,
 				type: 'Object',
 				generator: 'Object3D.toJSON'
 			}
@@ -613,12 +649,47 @@ THREE.Object3D.prototype = {
 
 				data.children.push( this.children[ i ].toJSON( meta ).object );
 
+					if(this.children[ i ].material instanceof THREE.MeshPhongMaterial){
+						var _mat = this.children[ i ].material;
+
+						
+						if(_mat.map !== null){ 
+
+							console.log(_mat.map);
+							parseTexture(_mat.map);
+						
+						}	
+						if(_mat.alphaMap !== null) parseTexture(_mat.alphaMap);
+						if(_mat.lightMap !== null) parseTexture(_mat.lightMap);
+						if(_mat.bumpMap !== null) parseTexture(_mat.bumpMap);
+						if(_mat.normalMap !== null) parseTexture(_mat.normalMap);	
+						if(_mat.specularMap !== null) parseTexture(_mat.specularMap);
+						if(_mat.envMap !== null) parseTexture(_mat.envMap);
+
+
+						// if(object.material.reflectivity !== null) data.reflectivity = object.material.reflectivity;
+						// if(object.material.bumpScale !== null) data.bumpScale = object.material.bumpScale;
+					}
 			}
 
 		}
 
 		// wrap serialized object with additional data
 
+		// if(object.material instanceof THREE.MeshPhongMaterial){
+		// 	if(object.material.map !== null) data.texture = parseTexture(object.material.map);
+		// 	if(object.material.alphaMap !== null) data.texture = parseTexture(object.material.alphaMap);
+		// 	if(object.material.lightMap !== null) data.texture = parseTexture(object.material.lightMap);
+		// 	if(object.material.bumpMap !== null) data.texture = parseTexture(object.material.bumpMap);
+		// 	if(object.material.normalMap !== null) data.texture = parseTexture(object.material.normalMap);	
+		// 	if(object.material.specularMap !== null) data.texture = parseTexture(object.material.specularMap);
+		// 	if(object.material.envMap !== null) data.texture = parseTexture(object.material.envMap);
+		// 	console.log(data.texture);
+
+		// 	if(object.material.reflectivity !== null) data.reflectivity = object.material.reflectivity;
+		// 	if(object.material.bumpScale !== null) data.bumpScale = object.material.bumpScale;
+		// }
+
 		var output = {};
 
 		if ( isRootObject ) {
@@ -627,9 +698,15 @@ THREE.Object3D.prototype = {
 
 			var geometries = extractFromCache( meta.geometries );
 			var materials = extractFromCache( meta.materials );
+			// var textures1 = extractFromCache( meta.textures );
+			// var images1 = extractFromCache( meta.images );
+
+			console.log(meta.textures);
 
 			if ( geometries.length > 0 ) output.geometries = geometries;
 			if ( materials.length > 0 ) output.materials = materials;
+			if ( meta.textures.length > 0 ) output.textures = meta.textures;
+			if ( meta.images.length > 0 ) output.images = meta.images;
 
 		}
 

src/loaders/ObjectLoader.js

@@ -15,21 +15,29 @@ THREE.ObjectLoader.prototype = {
 
 	load: function ( url, onLoad, onProgress, onError ) {
 
-		if ( this.texturePath === '' ) {
+		if(typeof url !==  "string" ){
 
-			this.texturePath = url.substring( 0, url.lastIndexOf( '/' ) + 1 );
+			this.parse(url.scene, onLoad);
 
-		}
 
-		var scope = this;
+		}else{
+
+			if ( this.texturePath === '' ) {
 
-		var loader = new THREE.XHRLoader( scope.manager );
-		loader.setCrossOrigin( this.crossOrigin );
-		loader.load( url, function ( text ) {
+				this.texturePath = url.substring( 0, url.lastIndexOf( '/' ) + 1 );
 
-			scope.parse( JSON.parse( text ), onLoad );
+			}
+
+			var scope = this;
 
-		}, onProgress, onError );
+			var loader = new THREE.XHRLoader( scope.manager );
+			loader.setCrossOrigin( this.crossOrigin );
+			loader.load( url, function ( text ) {
+
+				scope.parse( JSON.parse( text ), onLoad );
+
+			}, onProgress, onError );
+		}
 
 	},
 
@@ -54,6 +62,7 @@ THREE.ObjectLoader.prototype = {
 			if ( onLoad !== undefined ) onLoad( object );
 
 		} );
+
 		var textures  = this.parseTextures( json.textures, images );
 		var materials = this.parseMaterials( json.materials, textures );
 		var object = this.parseObject( json.object, geometries, materials );
@@ -63,7 +72,7 @@ THREE.ObjectLoader.prototype = {
 			if ( onLoad !== undefined ) onLoad( object );
 
 		}
-
+		console.log(object);
 		return object;
 
 	},
@@ -192,7 +201,7 @@ THREE.ObjectLoader.prototype = {
 						geometry = geometryLoader.parse( data.data ).geometry;
 
 						break;
-						
+
 					case 'TextGeometry':
 					
 						geometry = new THREE.TextGeometry(
@@ -245,51 +254,50 @@ THREE.ObjectLoader.prototype = {
 
 				material.uuid = data.uuid;
 
+				if ( data.depthTest !== undefined ) material.depthTest = data.depthTest;
+				if ( data.depthWrite !== undefined ) material.depthWrite = data.depthWrite;
+
 				if ( data.name !== undefined ) material.name = data.name;
 
-				if ( data.map !== undefined ) {
+				if ( data.map !== undefined ) material.map = getTexture( data.map );
 
-					material.map = getTexture( data.map );
+				if ( data.alphaMap !== undefined ) {
 
-				}
+					material.alphaMap = getTexture( data.alphaMap );
+
+					material.transparent = true;
+
+				}	
 
 				if ( data.bumpMap !== undefined ) {
 
 					material.bumpMap = getTexture( data.bumpMap );
-					if ( data.bumpScale !== undefined ) {
-						material.bumpScale = data.bumpScale;
-					}
-
+					if ( data.bumpScale !== undefined) material.bumpScale = data.bumpScale;
 				}
 
-				if ( data.alphaMap !== undefined ) {
-
-					material.alphaMap = getTexture( data.alphaMap );
+				if ( data.normalMap !== undefined ) {
 
+					material.normalMap = getTexture( data.normalMap );
+					if ( data.normalScale )	material.normalScale = new THREE.Vector2( data.normalScale, data.normalScale );
+					
 				}
 
+				if ( data.specularMap !== undefined ) material.specularMap = getTexture( data.specularMap );
+
 				if ( data.envMap !== undefined ) {
 
 					material.envMap = getTexture( data.envMap );
-
-				}
-
-				if ( data.normalMap !== undefined ) {
-
-					material.normalMap = getTexture( data.normalMap );
-					if ( data.normalScale !== undefined ) {
-						material.normalScale = new THREE.Vector2( data.normalScale, data.normalScale );
-					}
+					if ( data.reflectivity ) material.reflectivity = data.reflectivity;
+					
+					material.envMap.mapping = THREE.EquirectangularRefractionMapping;
+					material.combine = THREE.MultiplyOperation;
 
 				}
 
 				if ( data.lightMap !== undefined ) {
 
 					material.lightMap = getTexture( data.lightMap );
-
-					if ( data.lightMapIntensity !== undefined ) {
-						material.lightMapIntensity = data.lightMapIntensity;
-					}
+					if ( data.lightMapIntensity !== undefined ) material.lightMapIntensity = data.lightMapIntensity;
 
 				}
 
@@ -301,12 +309,6 @@ THREE.ObjectLoader.prototype = {
 					}
 				}
 
-				if ( data.specularMap !== undefined ) {
-
-					material.specularMap = getTexture( data.specularMap );
-
-				}
-
 				materials[ data.uuid ] = material;
 
 			}
@@ -344,9 +346,9 @@ THREE.ObjectLoader.prototype = {
 			for ( var i = 0, l = json.length; i < l; i ++ ) {
 
 				var image = json[ i ];
-				var path = /^(\/\/)|([a-z]+:(\/\/)?)/i.test( image.url ) ? image.url : scope.texturePath + image.url;
+				var imageData = image.data64;
 
-				images[ image.uuid ] = loadImage( path );
+				images[ image.uuid ] = loadImage(imageData);
 
 			}
 
@@ -437,6 +439,9 @@ THREE.ObjectLoader.prototype = {
 
 			};
 
+			console.log(data);
+			console.log(data.type);
+
 			switch ( data.type ) {
 
 				case 'Scene':
@@ -539,9 +544,6 @@ THREE.ObjectLoader.prototype = {
 
 			}
 
-			if ( data.castShadow !== undefined ) object.castShadow = data.castShadow;
-			if ( data.receiveShadow !== undefined ) object.receiveShadow = data.receiveShadow;
-
 			if ( data.visible !== undefined ) object.visible = data.visible;
 			if ( data.userData !== undefined ) object.userData = data.userData;
 

src/materials/MeshPhongMaterial.js

@@ -177,6 +177,23 @@ THREE.MeshPhongMaterial.prototype.toJSON = function () {
 	if ( this.blending !== THREE.NormalBlending ) data.blending = this.blending;
 	if ( this.side !== THREE.FrontSide ) data.side = this.side;
 
+	if(this.map !== null && this.map !== THREE.Texture ) data.map = this.map.uuid;
+	if(this.alphaMap !== null && this.alphaMap !== THREE.Texture ) data.alphaMap = this.alphaMap.uuid;
+	if(this.lightMap !== null && this.lightMap !== THREE.Texture ) data.lightMap = this.lightMap.uuid;
+	if(this.bumpMap !== null && this.bumpMap !== THREE.Texture ){ 
+		data.bumpMap = this.bumpMap.uuid;
+		data.bumpScale = this.bumpScale;
+	}
+	if(this.normalMap !== null && this.normalMap !== THREE.Texture ){
+		data.normalMap = this.normalMap.uuid;
+		data.normalScale = this.normalScale; // Removed for now, causes issue in editor ui.js
+	}
+	if(this.specularMap !== null && this.specularMap !== THREE.Texture ) data.specularMap = this.specularMap.uuid;
+	if(this.envMap !== null && this.envMap !== THREE.Texture ){
+		data.envMap = this.envMap.uuid;
+		data.reflectivity = this.reflectivity; // Scale behind envMap
+	} 
+
 	return data;
 
 };

src/textures/Texture.js

@@ -95,6 +95,57 @@ THREE.Texture.prototype = {
 
 	},
 
+	toJSON: function(){
+
+		var output = {
+			metadata: {
+				version: 4.41,
+				type: 'Texture',
+				generator: 'TextureExporter'
+			},
+			uuid: this.uuid
+
+		};
+
+		output.image = THREE.Math.generateUUID();
+
+		return output;
+		
+	},
+
+	//Bad place for something like this
+	toJSONImage: function(imageUUID){
+
+		var output = {
+			metadata: {
+				version: 4.41,
+				type: 'Image',
+				generator: 'ImageExporter'
+			},
+			uuid: imageUUID
+		};
+
+		var image = new Image();
+
+		image = this.image;
+
+		var imgCanvas = document.createElement("canvas"),
+		imgContext = imgCanvas.getContext("2d");
+
+		imgCanvas.width = image.width;
+		imgCanvas.height = image.height;
+
+		imgContext.drawImage(image, 0, 0, image.width, image.height );
+
+		if(image.width > 2048 || image.height > 2048){
+			output.data64 = imgCanvas.toDataURL("image/jpeg", 0.6);
+		}else{
+			output.data64 = imgCanvas.toDataURL("image/png");
+		}
+
+		return output;
+	},
+
 	update: function () {
 
 		this.dispatchEvent( { type: 'update' } );