ParticleCircleMaterial ⟶ ParticleCanvasMaterial (canvas code injection)

examples/canvas_materials_video.html

@@ -99,7 +99,7 @@
 				textureReflection = new THREE.Texture( imageReflection );
 				textureReflection.minFilter = THREE.LinearFilter;
 				textureReflection.magFilter = THREE.LinearFilter;
-				
+
 				var materialReflection = new THREE.MeshBasicMaterial( { map: textureReflection } );
 
 				//
@@ -125,7 +125,21 @@
 				var amountx = 10;
 				var amounty = 10;
 
-				var material = new THREE.ParticleCircleMaterial( { color: 0x808080 } );
+				var PI2 = Math.PI * 2;
+				var material = new THREE.ParticleCanvasMaterial( {
+
+							color: 0x0808080,
+							program: function ( context, color ) {
+
+								context.fillStyle = color.__styleString;
+								context.beginPath();
+								context.arc( 0, 0, 1, 0, PI2, true );
+								context.closePath();
+								context.fill();
+
+							}
+
+				} );
 
 				for ( var ix = 0; ix < amountx; ix++ ) {
 

examples/canvas_particles_floor.html

@@ -49,7 +49,21 @@
 
 				scene = new THREE.Scene();
 
-				var material = new THREE.ParticleCircleMaterial( { color: 0xffffff, opacity: 1 } );
+				var PI2 = Math.PI * 2;
+				var material = new THREE.ParticleCanvasMaterial( {
+
+							color: 0xffffff,
+							program: function ( context, color ) {
+
+								context.fillStyle = color.__styleString;
+								context.beginPath();
+								context.arc( 0, 0, 1, 0, PI2, true );
+								context.closePath();
+								context.fill();
+
+							}
+
+				} );
 
 				for ( var ix = 0; ix < AMOUNTX; ix++ ) {
 

examples/canvas_particles_random.html

@@ -45,9 +45,20 @@
 
 				scene = new THREE.Scene();
 
+				var PI2 = Math.PI * 2;
+				var program = function ( context, color ) {
+
+					context.fillStyle = color.__styleString;
+					context.beginPath();
+					context.arc( 0, 0, 1, 0, PI2, true );
+					context.closePath();
+					context.fill();
+
+				}
+
 				for ( var i = 0; i < 1000; i++ ) {
 
-					particle = new THREE.Particle( new THREE.ParticleCircleMaterial( { color: Math.random() * 0x808008 + 0x808080, opacity: 1 } ) );
+					particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808008 + 0x808080, program: program } ) );
 					particle.position.x = Math.random() * 2000 - 1000;
 					particle.position.y = Math.random() * 2000 - 1000;
 					particle.position.z = Math.random() * 2000 - 1000;

examples/canvas_particles_waves.html

@@ -51,8 +51,23 @@
 
 				particles = new Array();
 
+				var PI2 = Math.PI * 2;
+				var material = new THREE.ParticleCanvasMaterial( {
+
+							color: 0xffffff,
+							program: function ( context, color ) {
+
+								context.strokeStyle = color.__styleString;
+								context.beginPath();
+								context.arc( 0, 0, 1, 0, PI2, true );
+								context.closePath();
+								context.stroke();
+
+							}
+
+				} );
+
 				var i = 0;
-				var material = new THREE.ParticleCircleMaterial( { color: 0xffffff, opacity: 1 } );
 
 				for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
 

src/extras/io/Loader.js

@@ -2,9 +2,9 @@
  * @author alteredq / http://alteredqualia.com/
  */
 
-THREE.Loader = function () {
+THREE.Loader = function ( showStatus ) {
 
-	this.showStatus = showStatus;	
+	this.showStatus = showStatus;
 	this.statusDomElement = showStatus ? this.addStatusElement() : null;
 
 };
@@ -12,9 +12,9 @@ THREE.Loader = function () {
 THREE.Loader.prototype = {
 
 	addStatusElement: function ( ) {
-		
+
 		var e = document.createElement( "div" );
-		
+
 		e.style.fontSize = "0.8em"; 
 		e.style.textAlign = "left";
 		e.style.background = "#b00"; 
@@ -25,13 +25,13 @@ THREE.Loader.prototype = {
 		e.style.right = "0px"; 
 		e.style.top = "0px"; 
 		e.style.zIndex = 1000;
-		
+
 		e.innerHTML = "Loading ...";
-		
+
 		return e;
-		
+
 	},
-	
+
 	updateProgress: function ( progress ) {
 
 		var message = "Loaded ";

src/materials/ParticleCircleMaterial.js → src/materials/ParticleCanvasMaterial.js

@@ -3,22 +3,25 @@
  *
  * parameters = {
  *  color: <hex>,
+ *  program: <function>,
  *  opacity: <float>,
  *  blending: THREE.NormalBlending
  * }
  */
 
-THREE.ParticleCircleMaterial = function ( parameters ) {
+THREE.ParticleCanvasMaterial = function ( parameters ) {
 
 	this.id = THREE.MaterialCounter.value ++;
 
 	this.color = new THREE.Color( 0xffffff );
+	this.program = function ( context, color ) {};
 	this.opacity = 1;
 	this.blending = THREE.NormalBlending;
 
 	if ( parameters ) {
 
 		if ( parameters.color !== undefined ) this.color.setHex( parameters.color );
+		if ( parameters.program !== undefined ) this.program = parameters.program;
 		if ( parameters.opacity !== undefined ) this.opacity = parameters.opacity;
 		if ( parameters.blending !== undefined ) this.blending = parameters.blending;
 

src/renderers/CanvasRenderer.js

@@ -391,8 +391,8 @@ THREE.CanvasRenderer = function () {
 					_context.translate( v1.x, v1.y );
 					_context.rotate( - element.rotation );
 					_context.scale( scaleX, - scaleY );
-					_context.translate( - bitmapWidth, - bitmapHeight );
 
+					_context.translate( - bitmapWidth, - bitmapHeight );
 					_context.drawImage( bitmap, 0, 0 );
 
 					_context.restore();
@@ -410,7 +410,7 @@ THREE.CanvasRenderer = function () {
 				_context.stroke();
 				*/
 
-			} else if ( material instanceof THREE.ParticleCircleMaterial ) {
+			} else if ( material instanceof THREE.ParticleCanvasMaterial ) {
 
 				if ( _enableLighting ) {
 
@@ -441,18 +441,13 @@ THREE.CanvasRenderer = function () {
 
 				}
 
-				setFillStyle( _color.__styleString );
-
 				_context.save();
 				_context.translate( v1.x, v1.y );
 				_context.rotate( - element.rotation );
 				_context.scale( width, height );
 
-				_context.beginPath();
-				_context.arc( 0, 0, 1, 0, _pi2, true );
-				_context.closePath();
+				material.program( _context, _color );
 
-				_context.fill();
 				_context.restore();
 
 			}

utils/build.py

@@ -47,7 +47,7 @@ COMMON_FILES = [
 'materials/MeshFaceMaterial.js',
 'materials/MeshShaderMaterial.js',
 'materials/ParticleBasicMaterial.js',
-'materials/ParticleCircleMaterial.js',
+'materials/ParticleCanvasMaterial.js',
 'materials/ParticleDOMMaterial.js',
 'materials/Texture.js',
 'materials/RenderTarget.js',
@@ -132,7 +132,7 @@ CANVAS_FILES = [
 'materials/MeshNormalMaterial.js',
 'materials/MeshFaceMaterial.js',
 'materials/ParticleBasicMaterial.js',
-'materials/ParticleCircleMaterial.js',
+'materials/ParticleCanvasMaterial.js',
 'materials/Texture.js',
 'objects/Particle.js',
 'objects/Line.js',
@@ -213,7 +213,7 @@ SVG_FILES = [
 'materials/MeshNormalMaterial.js',
 'materials/MeshFaceMaterial.js',
 'materials/ParticleBasicMaterial.js',
-'materials/ParticleCircleMaterial.js',
+'materials/ParticleCanvasMaterial.js',
 'objects/Particle.js',
 'objects/Line.js',
 'objects/Mesh.js',
@@ -265,7 +265,6 @@ WEBGL_FILES = [
 'materials/MeshFaceMaterial.js',
 'materials/MeshShaderMaterial.js',
 'materials/ParticleBasicMaterial.js',
-'materials/ParticleCircleMaterial.js',
 'materials/Texture.js',
 'materials/RenderTarget.js',
 'materials/Uniforms.js',