Merge remote-tracking branch 'alteredq/normalized-sprites' into dev

build/three.js

@@ -34023,7 +34023,8 @@ THREE.SpritePlugin = function ( ) {
 
 				}
 
-				size = sprite.map.image.width / ( sprite.scaleByViewport ? viewportHeight : 1 );
+				//size = sprite.map.image.width / ( sprite.scaleByViewport ? viewportHeight : 1 );
+				size = 1 / ( sprite.scaleByViewport ? viewportHeight : 1 );
 
 				scale[ 0 ] = size * invAspect * sprite.scale.x;
 				scale[ 1 ] = size * sprite.scale.y;

examples/webgl_sprites.html

@@ -53,7 +53,7 @@
 
 				var amount = 200;
 				var radius = 500;
-				var mapA = THREE.ImageUtils.loadTexture( "textures/sprite0.png" );
+				var mapA = THREE.ImageUtils.loadTexture( "textures/sprite0.png", undefined, function() { createHUDSprites() } );
 				var mapB = THREE.ImageUtils.loadTexture( "textures/sprite1.png" );
 				mapC = THREE.ImageUtils.loadTexture( "textures/sprite2.png" );
 
@@ -90,20 +90,30 @@
 
 				// add 2d-sprites
 
-				sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
-				sprite.position.set( 100, 100, 0 );
-				sprite.opacity = 0.25;
-				scene.add( sprite );
+				var createHUDSprites = function() {
 
-				sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
-				sprite.position.set( 150, 150, 2 );
-				sprite.opacity = 0.5;
-				scene.add( sprite );
+					var scaleX = mapA.image.width;
+					var scaleY = mapA.image.height;
 
-				sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
-				sprite.position.set( 200, 200, 3 );
-				sprite.opacity = 1;
-				scene.add( sprite );
+					sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
+					sprite.position.set( 100, 100, 0 );
+					sprite.scale.set( scaleX, scaleY, 1 );
+					sprite.opacity = 0.25;
+					scene.add( sprite );
+
+					sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
+					sprite.position.set( 150, 150, 2 );
+					sprite.scale.set( scaleX, scaleY, 1 );
+					sprite.opacity = 0.5;
+					scene.add( sprite );
+
+					sprite = new THREE.Sprite( { map: mapA, alignment: THREE.SpriteAlignment.topLeft } );
+					sprite.position.set( 200, 200, 3 );
+					sprite.scale.set( scaleX, scaleY, 1 );
+					sprite.opacity = 1;
+					scene.add( sprite );
+
+				}
 
 				// renderer
 
@@ -152,8 +162,18 @@
 					var sprite = group.children[ c ];
 					var scale = Math.sin( time + sprite.position.x * 0.01 ) * 0.3 + 1.0;
 
+					var imageWidth = 1;
+					var imageHeight = 1;
+
+					if ( sprite.map && sprite.map.image && sprite.map.image.width ) {
+
+						imageWidth = sprite.map.image.width;
+						imageHeight = sprite.map.image.height;
+
+					}
+
 					sprite.rotation += 0.1 * ( c / group.children.length );
-					sprite.scale.set( scale, scale, 1.0 );
+					sprite.scale.set( scale * imageWidth, scale * imageHeight, 1.0 );
 
 					if ( sprite.map !== mapC )
 						sprite.opacity = Math.sin( time + sprite.position.x * 0.01 ) * 0.4 + 0.6;

src/extras/renderers/plugins/SpritePlugin.js

@@ -170,7 +170,8 @@ THREE.SpritePlugin = function ( ) {
 
 				}
 
-				size = sprite.map.image.width / ( sprite.scaleByViewport ? viewportHeight : 1 );
+				//size = sprite.map.image.width / ( sprite.scaleByViewport ? viewportHeight : 1 );
+				size = 1 / ( sprite.scaleByViewport ? viewportHeight : 1 );
 
 				scale[ 0 ] = size * invAspect * sprite.scale.x;
 				scale[ 1 ] = size * sprite.scale.y;