CanvasRenderer: Support ParticleBasicMaterial without map.

examples/canvas_particles_floor.html

@@ -51,25 +51,15 @@
 				scene.add( camera );
 
 				var PI2 = Math.PI * 2;
-				var material = new THREE.ParticleCanvasMaterial( {
-
-					color: 0xffffff,
-					program: function ( context ) {
-
-						context.beginPath();
-						context.arc( 0, 0, 1, 0, PI2, true );
-						context.closePath();
-						context.fill();
-
-					}
-
-				} );
+				var material = new THREE.ParticleBasicMaterial( { color: 0xffffff } );
 
 				for ( var ix = 0; ix < AMOUNTX; ix++ ) {
 
 					for ( var iy = 0; iy < AMOUNTY; iy++ ) {
 
 						particle = new THREE.Particle( material );
+						particle.scale.y = 2;
+						particle.scale.y = 6;
 						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
 						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
 						scene.add( particle );

src/core/Projector.js

@@ -377,6 +377,7 @@ THREE.Projector = function() {
 				if ( _vector4.z > 0 && _vector4.z < 1 ) {
 
 					_particle = getNextParticleInPool();
+					_particle.object = object;
 					_particle.x = _vector4.x / _vector4.w;
 					_particle.y = _vector4.y / _vector4.w;
 					_particle.z = _vector4.z;

src/renderers/CanvasRenderer.js

@@ -415,7 +415,34 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 			if ( material instanceof THREE.ParticleBasicMaterial ) {
 
-				if ( material.map !== null ) {
+				if ( material.map === null ) {
+
+					scaleX = element.object.scale.x;
+					scaleY = element.object.scale.y;
+
+					// TODO: Be able to disable this
+
+					scaleX *= element.scale.x * _canvasWidthHalf;
+					scaleY *= element.scale.y * _canvasHeightHalf;
+
+					_bboxRect.set( v1.x - scaleX, v1.y - scaleY, v1.x  + scaleX, v1.y + scaleY );
+
+					if ( _clipRect.intersects( _bboxRect ) === false ) {
+
+						return;
+
+					}
+
+					setFillStyle( material.color.getContextStyle() );
+
+					_context.save();
+					_context.translate( v1.x, v1.y );
+					_context.rotate( - element.rotation );
+					_context.scale( scaleX, scaleY );
+					_context.fillRect( - 1, - 1, 1, 1 );
+					_context.restore();
+
+				} else {
 
 					bitmap = material.map.image;
 					bitmapWidth = bitmap.width >> 1;
@@ -444,19 +471,17 @@ THREE.CanvasRenderer = function ( parameters ) {
 
 					_context.translate( - bitmapWidth, - bitmapHeight );
 					_context.drawImage( bitmap, 0, 0 );
-
 					_context.restore();
 
 				}
 
 				/* DEBUG
+				setStrokeStyle( 'rgb(255,255,0)' );
 				_context.beginPath();
 				_context.moveTo( v1.x - 10, v1.y );
 				_context.lineTo( v1.x + 10, v1.y );
 				_context.moveTo( v1.x, v1.y - 10 );
 				_context.lineTo( v1.x, v1.y + 10 );
-				_context.closePath();
-				_context.strokeStyle = 'rgb(255,255,0)';
 				_context.stroke();
 				*/
 

src/renderers/renderables/RenderableParticle.js

@@ -4,6 +4,8 @@
 
 THREE.RenderableParticle = function () {
 
+	this.object = null;
+
 	this.x = null;
 	this.y = null;
 	this.z = null;