Using ImageLoader in ImageUtils.loadTexture.

examples/canvas_geometry_earth.html

@@ -60,25 +60,43 @@
 				camera.position.z = 500;
 				scene.add( camera );
 
-				// THREE.ImageUtils.loadTexture( 'textures/shadow.png' )
-				var shadowTexture = new THREE.Texture();
+				// earth
 				
+				var earthTexture = new THREE.Texture();
+
 				var loader = new THREE.ImageLoader();
-				loader.addEventListener( 'complete', function ( event ) { shadowTexture.image = event.image } );
-				loader.load( 'textures/shadow.png' );
+				loader.addEventListener( 'complete', function ( event ) {
 
-				mesh = new THREE.Mesh( new THREE.PlaneGeometry( 300, 300, 3, 3 ), new THREE.MeshBasicMaterial( { map: shadowTexture, overdraw: true } ) );
-				mesh.position.y = - 250;
+					earthTexture.image = event.image;
+					earthTexture.needsUpdate = true;
+
+				} );
+				loader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );
+
+				mesh = new THREE.Mesh(
+					new THREE.SphereGeometry( 200, 20, 20 ),
+					new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } )
+				);
 				scene.add( mesh );
 
-				// THREE.ImageUtils.loadTexture( 'textures/land_ocean_ice_cloud_2048.jpg' )
-				var earthTexture = new THREE.Texture();
+				// shadow
+				
+				var shadowTexture = new THREE.Texture();
 				
 				var loader = new THREE.ImageLoader();
-				loader.addEventListener( 'complete', function ( event ) { earthTexture.image = event.image } );
-				loader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );
+				loader.addEventListener( 'complete', function ( event ) {
+				
+					shadowTexture.image = event.image;
+					shadowTexture.needsUpdate = true;
+
+				} );
+				loader.load( 'textures/shadow.png' );
 
-				mesh = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 20 ), new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } ) );
+				mesh = new THREE.Mesh(
+					new THREE.PlaneGeometry( 300, 300, 3, 3 ),
+					new THREE.MeshBasicMaterial( { map: shadowTexture, overdraw: true } )
+				);
+				mesh.position.y = - 250;
 				scene.add( mesh );
 
 				renderer = new THREE.CanvasRenderer();

src/extras/ImageUtils.js

@@ -7,13 +7,21 @@ THREE.ImageUtils = {
 
 	crossOrigin: 'anonymous',
 
-	loadTexture: function ( path, mapping, callback ) {
+	loadTexture: function ( url, mapping, callback ) {
 
-		var image = new Image(), texture = new THREE.Texture( image, mapping );
+		var texture = new THREE.Texture( undefined, mapping );
 
-		image.onload = function () { texture.needsUpdate = true; if ( callback ) callback( this ); };
-		image.crossOrigin = this.crossOrigin;
-		image.src = path;
+		var loader = new THREE.ImageLoader();
+		loader.crossOrigin = this.crossOrigin;
+		loader.addEventListener( 'complete', function ( event ) {
+
+			texture.image = event.image;
+			texture.needsUpdate = true;
+			
+			if ( callback ) callback( this );
+
+		} );
+		loader.load( url );
 
 		return texture;
 

src/loaders/ImageLoader.js

@@ -13,16 +13,19 @@ THREE.ImageLoader = function () {
 	this.load = function ( url ) {
 
 		var image = new Image();
+		
 		image.addEventListener( 'load', function () {
 
 			_this.dispatchEvent( { type: 'complete', image: image } );
 
 		}, false );
+
 		image.addEventListener( 'error', function () {
 		
 			_this.dispatchEvent( { type: 'error', image: image } ); 
 		
 		}, false );
+
 		image.crossOrigin = this.crossOrigin;
 		image.src = url;
 

src/loaders/JSONLoader.js

@@ -14,7 +14,7 @@ THREE.JSONLoader.prototype.constructor = THREE.JSONLoader;
 
 THREE.JSONLoader.prototype.load = function ( url, callback, texturePath ) {
 
-	var worker, scope = this;
+	var scope = this;
 
 	texturePath = texturePath ? texturePath : this.extractUrlBase( url );