Loader: Using MaterialLoader in .createMaterial().

src/loaders/Loader.js

@@ -44,315 +44,215 @@ THREE.Loader.prototype = {
 
 	createMaterial: ( function () {
 
-		var imageLoader;
+		var color, textureLoader, materialLoader;
 
-		return function createMaterial( m, texturePath, crossOrigin ) {
+		return function ( m, texturePath, crossOrigin ) {
 
-			var scope = this;
+			if ( color === undefined ) color = new THREE.Color();
+			if ( textureLoader === undefined ) textureLoader = new THREE.TextureLoader();
+			if ( materialLoader === undefined ) materialLoader = new THREE.MaterialLoader();
 
-			if ( crossOrigin === undefined && scope.crossOrigin !== undefined ) crossOrigin = scope.crossOrigin;
+			// convert from old material format
 
-			if ( imageLoader === undefined ) imageLoader = new THREE.ImageLoader();
+			var textures = {};
 
-			function nearest_pow2( n ) {
+			function loadTexture( path, repeat, offset, wrap, anisotropy ) {
 
-				var l = Math.log( n ) / Math.LN2;
-				return Math.pow( 2, Math.round(  l ) );
-
-			}
-
-			function create_texture( where, name, sourceFile, repeat, offset, wrap, anisotropy ) {
-
-				var fullPath = texturePath + sourceFile;
+				var fullPath = texturePath + path;
+				var loader = THREE.Loader.Handlers.get( fullPath );
 
 				var texture;
 
-				var loader = THREE.Loader.Handlers.get( fullPath );
-
 				if ( loader !== null ) {
 
 					texture = loader.load( fullPath );
 
 				} else {
 
-					texture = new THREE.Texture();
-
-					loader = imageLoader;
-					loader.setCrossOrigin( crossOrigin );
-					loader.load( fullPath, function ( image ) {
-
-						if ( THREE.Math.isPowerOfTwo( image.width ) === false ||
-							THREE.Math.isPowerOfTwo( image.height ) === false ) {
-
-							var width = nearest_pow2( image.width );
-							var height = nearest_pow2( image.height );
-
-							var canvas = document.createElement( 'canvas' );
-							canvas.width = width;
-							canvas.height = height;
-
-							var context = canvas.getContext( '2d' );
-							context.drawImage( image, 0, 0, width, height );
-
-							texture.image = canvas;
-
-						} else {
-
-							texture.image = image;
-
-						}
-
-						texture.needsUpdate = true;
-
-					} );
+					textureLoader.setCrossOrigin( crossOrigin );
+					texture = textureLoader.load( fullPath );
 
 				}
 
-				texture.sourceFile = sourceFile;
-
-				if ( repeat ) {
+				if ( repeat !== undefined ) {
 
 					texture.repeat.set( repeat[ 0 ], repeat[ 1 ] );
 
-					if ( repeat[ 0 ] !== 1 ) texture.wrapS = THREE.RepeatWrapping;
-					if ( repeat[ 1 ] !== 1 ) texture.wrapT = THREE.RepeatWrapping;
+					if ( repeat[ 0 ] > 1 ) texture.wrapS = THREE.RepeatWrapping;
+					if ( repeat[ 1 ] > 1 ) texture.wrapT = THREE.RepeatWrapping;
 
 				}
 
-				if ( offset ) {
+				if ( offset !== undefined ) {
 
 					texture.offset.set( offset[ 0 ], offset[ 1 ] );
 
 				}
 
-				if ( wrap ) {
+				if ( wrap !== undefined ) {
 
-					var wrapMap = {
-						'repeat': THREE.RepeatWrapping,
-						'mirror': THREE.MirroredRepeatWrapping
-					};
+					if ( wrap[ 0 ] === 'repeat' ) texture.wrapS = THREE.RepeatWrapping;
+					if ( wrap[ 0 ] === 'mirror' ) texture.wrapS = THREE.MirroredRepeatWrapping;
 
-					if ( wrapMap[ wrap[ 0 ] ] !== undefined ) texture.wrapS = wrapMap[ wrap[ 0 ] ];
-					if ( wrapMap[ wrap[ 1 ] ] !== undefined ) texture.wrapT = wrapMap[ wrap[ 1 ] ];
+					if ( wrap[ 1 ] === 'repeat' ) texture.wrapT = THREE.RepeatWrapping;
+					if ( wrap[ 1 ] === 'mirror' ) texture.wrapT = THREE.MirroredRepeatWrapping;
 
 				}
 
-				if ( anisotropy ) {
+				if ( anisotropy !== undefined ) {
 
 					texture.anisotropy = anisotropy;
 
 				}
 
-				where[ name ] = texture;
-
-			}
-
-			function rgb2hex( rgb ) {
-
-				return ( rgb[ 0 ] * 255 << 16 ) + ( rgb[ 1 ] * 255 << 8 ) + rgb[ 2 ] * 255;
-
-			}
-
-			// defaults
-
-			var mtype = 'MeshLambertMaterial';
-			var mpars = {};
-
-			// parameters from model file
-
-			if ( m.shading ) {
-
-				var shading = m.shading.toLowerCase();
-
-				if ( shading === 'phong' ) mtype = 'MeshPhongMaterial';
-				else if ( shading === 'basic' ) mtype = 'MeshBasicMaterial';
-
-			}
-
-			if ( m.blending !== undefined && THREE[ m.blending ] !== undefined ) {
-
-				mpars.blending = THREE[ m.blending ];
-
-			}
-
-			if ( m.transparent !== undefined ) {
-
-				mpars.transparent = m.transparent;
-
-			}
-
-			if ( m.opacity !== undefined && m.opacity < 1.0 ) {
-
-				mpars.transparent = true;
-
-			}
-
-			if ( m.depthTest !== undefined ) {
-
-				mpars.depthTest = m.depthTest;
-
-			}
-
-			if ( m.depthWrite !== undefined ) {
-
-				mpars.depthWrite = m.depthWrite;
-
-			}
-
-			if ( m.visible !== undefined ) {
-
-				mpars.visible = m.visible;
-
-			}
-
-			if ( m.flipSided !== undefined ) {
-
-				mpars.side = THREE.BackSide;
-
-			}
-
-			if ( m.doubleSided !== undefined ) {
-
-				mpars.side = THREE.DoubleSide;
-
-			}
-
-			if ( m.wireframe !== undefined ) {
-
-				mpars.wireframe = m.wireframe;
-
-			}
-
-			if ( m.vertexColors !== undefined ) {
-
-				if ( m.vertexColors === 'face' ) {
-
-					mpars.vertexColors = THREE.FaceColors;
-
-				} else if ( m.vertexColors ) {
-
-					mpars.vertexColors = THREE.VertexColors;
-
-				}
-
-			}
-
-			// colors
-
-			if ( m.colorDiffuse ) {
-
-				mpars.color = rgb2hex( m.colorDiffuse );
-
-			} else if ( m.DbgColor ) {
-
-				mpars.color = m.DbgColor;
-
-			}
-
-			if ( m.colorEmissive ) {
-
-				mpars.emissive = rgb2hex( m.colorEmissive );
-
-			}
-
-			if ( mtype === 'MeshPhongMaterial' ) {
-
-				if ( m.colorSpecular ) {
-
-					mpars.specular = rgb2hex( m.colorSpecular );
-
-				}
-
-				if ( m.specularCoef ) {
-
-					mpars.shininess = m.specularCoef;
-
-				}
-
-			}
-
-			// modifiers
-
-			if ( m.transparency !== undefined ) {
-
-				console.warn( 'THREE.Loader: transparency has been renamed to opacity' );
-				m.opacity = m.transparency;
-
-			}
-
-			if ( m.opacity !== undefined ) {
-
-				mpars.opacity = m.opacity;
-
-			}
-
-			// textures
-
-			if ( texturePath ) {
-
-				if ( m.mapDiffuse ) {
-
-					create_texture( mpars, 'map', m.mapDiffuse, m.mapDiffuseRepeat, m.mapDiffuseOffset, m.mapDiffuseWrap, m.mapDiffuseAnisotropy );
-
-				}
-
-				if ( m.mapLight ) {
-
-					create_texture( mpars, 'lightMap', m.mapLight, m.mapLightRepeat, m.mapLightOffset, m.mapLightWrap, m.mapLightAnisotropy );
-
-				}
-
-				if ( m.mapAO ) {
-
-					create_texture( mpars, 'aoMap', m.mapAO, m.mapAORepeat, m.mapAOOffset, m.mapAOWrap, m.mapAOAnisotropy );
-
-				}
-
-				if ( m.mapBump ) {
-
-					create_texture( mpars, 'bumpMap', m.mapBump, m.mapBumpRepeat, m.mapBumpOffset, m.mapBumpWrap, m.mapBumpAnisotropy );
-
-				}
-
-				if ( m.mapNormal ) {
-
-					create_texture( mpars, 'normalMap', m.mapNormal, m.mapNormalRepeat, m.mapNormalOffset, m.mapNormalWrap, m.mapNormalAnisotropy );
-
-				}
-
-				if ( m.mapSpecular ) {
-
-					create_texture( mpars, 'specularMap', m.mapSpecular, m.mapSpecularRepeat, m.mapSpecularOffset, m.mapSpecularWrap, m.mapSpecularAnisotropy );
-
-				}
-
-				if ( m.mapAlpha ) {
+				var uuid = THREE.Math.generateUUID();
 
-					create_texture( mpars, 'alphaMap', m.mapAlpha, m.mapAlphaRepeat, m.mapAlphaOffset, m.mapAlphaWrap, m.mapAlphaAnisotropy );
+				textures[ uuid ] = texture;
 
-				}
+				return uuid;
 
 			}
 
 			//
 
-			if ( m.mapBumpScale ) {
-
-				mpars.bumpScale = m.mapBumpScale;
-
-			}
-
-			if ( m.mapNormalFactor ) {
-
-				mpars.normalScale = new THREE.Vector2( m.mapNormalFactor, m.mapNormalFactor );
+			var json = {
+				uuid: THREE.Math.generateUUID(),
+				type: 'MeshLambertMaterial'
+			};
+
+			for ( var name in m ) {
+
+				var value = m[ name ];
+
+				switch ( name ) {
+					case 'DbgColor':
+						json.color = value;
+						break;
+					case 'DbgIndex':
+					case 'opticalDensity':
+					case 'illumination':
+						// These were never supported
+						break;
+					case 'DbgName':
+						json.name = value;
+						break;
+					case 'blending':
+						json.blending = THREE[ value ];
+						break;
+					case 'colorDiffuse':
+						json.color = color.fromArray( value ).getHex();
+						break;
+					case 'colorSpecular':
+						json.specular = color.fromArray( value ).getHex();
+						break;
+					case 'colorEmissive':
+						json.emissive = color.fromArray( value ).getHex();
+						break;
+					case 'specularCoef':
+						json.shininess = value;
+						break;
+					case 'shading':
+						if ( value.toLowerCase() === 'basic' ) json.type = 'MeshBasicMaterial';
+						if ( value.toLowerCase() === 'phong' ) json.type = 'MeshPhongMaterial';
+						break;
+					case 'mapDiffuse':
+						json.map = loadTexture( value, json.mapDiffuseRepeat, json.mapDiffuseOffset, json.mapDiffuseWrap, json.mapDiffuseAnisotropy );
+						break;
+					case 'mapDiffuseRepeat':
+					case 'mapDiffuseOffset':
+					case 'mapDiffuseWrap':
+					case 'mapDiffuseAnisotropy':
+						break;
+					case 'mapLight':
+						json.lightMap = loadTexture( value, json.mapLightRepeat, json.mapLightOffset, json.mapLightWrap, json.mapLightAnisotropy );
+						break;
+					case 'mapLightRepeat':
+					case 'mapLightOffset':
+					case 'mapLightWrap':
+					case 'mapLightAnisotropy':
+						break;
+					case 'mapAO':
+						json.aoMap = loadTexture( value, json.mapAORepeat, json.mapAOOffset, json.mapAOWrap, json.mapAOAnisotropy );
+						break;
+					case 'mapAORepeat':
+					case 'mapAOOffset':
+					case 'mapAOWrap':
+					case 'mapAOAnisotropy':
+						break;
+					case 'mapBump':
+						json.bumpMap = loadTexture( value, json.mapBumpRepeat, json.mapBumpOffset, json.mapBumpWrap, json.mapBumpAnisotropy );
+						break;
+					case 'mapBumpScale':
+						json.bumpScale = value;
+						break;
+					case 'mapBumpRepeat':
+					case 'mapBumpOffset':
+					case 'mapBumpWrap':
+					case 'mapBumpAnisotropy':
+						break;
+					case 'mapNormal':
+						json.normalMap = loadTexture( value, json.mapNormalRepeat, json.mapNormalOffset, json.mapNormalWrap, json.mapNormalAnisotropy );
+						break;
+					case 'mapNormalFactor':
+						json.normalScale = [ value, value ];
+						break;
+					case 'mapNormalRepeat':
+					case 'mapNormalOffset':
+					case 'mapNormalWrap':
+					case 'mapNormalAnisotropy':
+						break;
+					case 'mapSpecular':
+						json.specularMap = loadTexture( value, json.mapSpecularRepeat, json.mapSpecularOffset, json.mapSpecularWrap, json.mapSpecularAnisotropy );
+						break;
+					case 'mapSpecularRepeat':
+					case 'mapSpecularOffset':
+					case 'mapSpecularWrap':
+					case 'mapSpecularAnisotropy':
+						break;
+					case 'mapAlpha':
+						json.alphaMap = loadTexture( value, json.mapAlphaRepeat, json.mapAlphaOffset, json.mapAlphaWrap, json.mapAlphaAnisotropy );
+						break;
+					case 'mapAlphaRepeat':
+					case 'mapAlphaOffset':
+					case 'mapAlphaWrap':
+					case 'mapAlphaAnisotropy':
+						break;
+					case 'flipSided':
+						json.side = THREE.BackSide;
+						break;
+					case 'doubleSided':
+						json.side = THREE.DoubleSide;
+						break;
+					case 'transparency':
+						console.warn( 'THREE.Loader: transparency has been renamed to opacity' );
+						json.opacity = value;
+						break;
+					case 'opacity':
+					case 'transparent':
+					case 'depthTest':
+					case 'depthWrite':
+					case 'transparent':
+					case 'visible':
+					case 'wireframe':
+						json[ name ] = value;
+						break;
+					case 'vertexColors':
+						if ( value === true ) json.vertexColors = THREE.VertexColors;
+						if ( value === 'face' ) json.vertexColors = THREE.FaceColors;
+						break;
+					default:
+						console.error( 'Loader.createMaterial: Unsupported', name, value );
+						break;
+				}
 
 			}
 
-			var material = new THREE[ mtype ]( mpars );
+			if ( json.type !== 'MeshPhongMaterial' ) delete json.specular;
+			if ( json.opacity < 1 ) json.transparent = true;
 
-			if ( m.DbgName !== undefined ) material.name = m.DbgName;
+			materialLoader.setTextures( textures );
 
-			return material;
+			return materialLoader.parse( json );
 
 		};
 
@@ -372,10 +272,12 @@ THREE.Loader.Handlers = {
 
 	get: function ( file ) {
 
-		for ( var i = 0, l = this.handlers.length; i < l; i += 2 ) {
+		var handlers = this.handlers;
+
+		for ( var i = 0, l = handlers.length; i < l; i += 2 ) {
 
-			var regex = this.handlers[ i ];
-			var loader  = this.handlers[ i + 1 ];
+			var regex = handlers[ i ];
+			var loader  = handlers[ i + 1 ];
 
 			if ( regex.test( file ) ) {
 

src/loaders/TextureLoader.js

@@ -16,11 +16,13 @@ THREE.TextureLoader.prototype = {
 
 		var scope = this;
 
+		var texture = new THREE.Texture();
+
 		var loader = new THREE.ImageLoader( scope.manager );
 		loader.setCrossOrigin( this.crossOrigin );
 		loader.load( url, function ( image ) {
 
-			var texture = new THREE.Texture( image );
+			texture.image = image;
 			texture.needsUpdate = true;
 
 			if ( onLoad !== undefined ) {
@@ -31,6 +33,8 @@ THREE.TextureLoader.prototype = {
 
 		}, onProgress, onError );
 
+		return texture;
+
 	},
 
 	setCrossOrigin: function ( value ) {