diff --git a/examples/canvas_particles_floor.html b/examples/canvas_particles_floor.html
index a94c335bfc3edaf4a75169842ca071610cabacfb..2b430572aed713e1c6a0674ac5868092cfa4dc8a 100644
--- a/examples/canvas_particles_floor.html
+++ b/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 );
diff --git a/src/core/Projector.js b/src/core/Projector.js
index 26dc9f77da9d103d4b501b98493778f0eccfc8ec..1320a92bf232ce474b4b28819f5cbb68a5767996 100644
--- a/src/core/Projector.js
+++ b/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;
diff --git a/src/renderers/CanvasRenderer.js b/src/renderers/CanvasRenderer.js
index c88ccac6118288e4baee3b0968c2a181d1f172a1..af2db7f1e07dd4fe26fc3318977907d56de6a917 100644
--- a/src/renderers/CanvasRenderer.js
+++ b/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();
*/
diff --git a/src/renderers/renderables/RenderableParticle.js b/src/renderers/renderables/RenderableParticle.js
index 3c9350f82bb2547fbee2281cea23ed748ee38b54..570e46798a330ecf78c706c9d32489428b880327 100644
--- a/src/renderers/renderables/RenderableParticle.js
+++ b/src/renderers/renderables/RenderableParticle.js
@@ -4,6 +4,8 @@
THREE.RenderableParticle = function () {
+ this.object = null;
+
this.x = null;
this.y = null;
this.z = null;