Fixed some Particle/Sprite breakage.

build/three.js

@@ -15720,7 +15720,7 @@ THREE.CanvasRenderer = function ( parameters ) {
 		var width, height, scaleX, scaleY,
 		bitmap, bitmapWidth, bitmapHeight;
 
-		if ( material instanceof THREE.Sprite ||
+		if ( material instanceof THREE.SpriteMaterial ||
 			 material instanceof THREE.ParticleSystemMaterial ) { // Backwards compatibility
 
 			if ( material.map === null ) {

examples/canvas_particles_sprites.html

@@ -45,7 +45,7 @@
 
 				scene = new THREE.Scene();
 
-				var material = new THREE.SpriteBasicMaterial( {
+				var material = new THREE.SpriteMaterial( {
 					map: new THREE.Texture( generateSprite() ),
 					blending: THREE.AdditiveBlending
 				} );

src/renderers/CanvasRenderer.js

@@ -453,21 +453,25 @@ THREE.CanvasRenderer = function ( parameters ) {
 		var width, height, scaleX, scaleY,
 		bitmap, bitmapWidth, bitmapHeight;
 
-		if ( material instanceof THREE.Sprite ||
+		if ( material instanceof THREE.SpriteMaterial ||
 			 material instanceof THREE.ParticleSystemMaterial ) { // Backwards compatibility
 
-			if ( material.map === null ) {
+			if ( material.map.image !== undefined ) {
 
-				scaleX = element.object.scale.x;
-				scaleY = element.object.scale.y;
+				bitmap = material.map.image;
+				bitmapWidth = bitmap.width >> 1;
+				bitmapHeight = bitmap.height >> 1;
 
-				// TODO: Be able to disable this
+				scaleX = element.scale.x * _canvasWidthHalf;
+				scaleY = element.scale.y * _canvasHeightHalf;
 
-				scaleX *= element.scale.x * _canvasWidthHalf;
-				scaleY *= element.scale.y * _canvasHeightHalf;
+				width = scaleX * bitmapWidth;
+				height = scaleY * bitmapHeight;
 
-				_elemBox.min.set( v1.x - scaleX, v1.y - scaleY );
-				_elemBox.max.set( v1.x + scaleX, v1.y + scaleY );
+				// TODO: Rotations break this...
+
+				_elemBox.min.set( v1.x - width, v1.y - height );
+				_elemBox.max.set( v1.x + width, v1.y + height );
 
 				if ( _clipBox.isIntersectionBox( _elemBox ) === false ) {
 
@@ -476,31 +480,27 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 				}
 
-				setFillStyle( material.color.getStyle() );
-
 				_context.save();
 				_context.translate( v1.x, v1.y );
 				_context.rotate( - element.rotation );
-				_context.scale( scaleX, scaleY );
-				_context.fillRect( -1, -1, 2, 2 );
+				_context.scale( scaleX, - scaleY );
+
+				_context.translate( - bitmapWidth, - bitmapHeight );
+				_context.drawImage( bitmap, 0, 0 );
 				_context.restore();
 
 			} else {
 
-				bitmap = material.map.image;
-				bitmapWidth = bitmap.width >> 1;
-				bitmapHeight = bitmap.height >> 1;
-
-				scaleX = element.scale.x * _canvasWidthHalf;
-				scaleY = element.scale.y * _canvasHeightHalf;
+				scaleX = element.object.scale.x;
+				scaleY = element.object.scale.y;
 
-				width = scaleX * bitmapWidth;
-				height = scaleY * bitmapHeight;
+				// TODO: Be able to disable this
 
-				// TODO: Rotations break this...
+				scaleX *= element.scale.x * _canvasWidthHalf;
+				scaleY *= element.scale.y * _canvasHeightHalf;
 
-				_elemBox.min.set( v1.x - width, v1.y - height );
-				_elemBox.max.set( v1.x + width, v1.y + height );
+				_elemBox.min.set( v1.x - scaleX, v1.y - scaleY );
+				_elemBox.max.set( v1.x + scaleX, v1.y + scaleY );
 
 				if ( _clipBox.isIntersectionBox( _elemBox ) === false ) {
 
@@ -509,13 +509,13 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 				}
 
+				setFillStyle( material.color.getStyle() );
+
 				_context.save();
 				_context.translate( v1.x, v1.y );
 				_context.rotate( - element.rotation );
-				_context.scale( scaleX, - scaleY );
-
-				_context.translate( - bitmapWidth, - bitmapHeight );
-				_context.drawImage( bitmap, 0, 0 );
+				_context.scale( scaleX, scaleY );
+				_context.fillRect( -1, -1, 2, 2 );
 				_context.restore();
 
 			}