Updated examples with Particle/Sprite change.

examples/canvas_interactive_cubes.html

@@ -72,7 +72,7 @@
 				}
 
 				var PI2 = Math.PI * 2;
-				particleMaterial = new THREE.ParticleCanvasMaterial( {
+				particleMaterial = new THREE.SpriteCanvasMaterial( {
 
 					color: 0x000000,
 					program: function ( context ) {
@@ -129,7 +129,7 @@
 
 					intersects[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );
 
-					var particle = new THREE.Particle( particleMaterial );
+					var particle = new THREE.Sprite( particleMaterial );
 					particle.position = intersects[ 0 ].point;
 					particle.scale.x = particle.scale.y = 8;
 					scene.add( particle );

examples/canvas_interactive_lines.html

@@ -58,8 +58,8 @@
 
 				}
 
-				sphereInter = new THREE.Particle(
-					new THREE.ParticleCanvasMaterial( {
+				sphereInter = new THREE.Sprite(
+					new THREE.SpriteCanvasMaterial( {
 						color: 0xff0000,
 						program: program }
 					)

examples/canvas_interactive_particles.html

@@ -68,7 +68,7 @@
 
 				for ( var i = 0; i < 100; i ++ ) {
 
-					var particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808080 + 0x808080, program: programStroke } ) );
+					var particle = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: Math.random() * 0x808080 + 0x808080, program: programStroke } ) );
 					particle.position.x = Math.random() * 800 - 400;
 					particle.position.y = Math.random() * 800 - 400;
 					particle.position.z = Math.random() * 800 - 400;

examples/canvas_lights_pointlights.html

@@ -80,15 +80,15 @@
 
 				}
 
-				particle1 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0xff0040, program: program } ) );
+				particle1 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) );
 				particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
 				scene.add( particle1 );
 
-				particle2 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x0040ff, program: program } ) );
+				particle2 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) );
 				particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
 				scene.add( particle2 );
 
-				particle3 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x80ff80, program: program } ) );
+				particle3 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) );
 				particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
 				scene.add( particle3 );
 

examples/canvas_lights_pointlights_smooth.html

@@ -80,15 +80,15 @@
 
 				}
 
-				particle1 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0xff0040, program: program } ) );
+				particle1 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xff0040, program: program } ) );
 				particle1.scale.x = particle1.scale.y = particle1.scale.z = 0.5;
 				scene.add( particle1 );
 
-				particle2 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x0040ff, program: program } ) );
+				particle2 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x0040ff, program: program } ) );
 				particle2.scale.x = particle2.scale.y = particle2.scale.z = 0.5;
 				scene.add( particle2 );
 
-				particle3 = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0x80ff80, program: program } ) );
+				particle3 = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0x80ff80, program: program } ) );
 				particle3.scale.x = particle3.scale.y = particle3.scale.z = 0.5;
 				scene.add( particle3 );
 

examples/canvas_lines.html

@@ -56,7 +56,7 @@
 				// particles
 
 				var PI2 = Math.PI * 2;
-				var material = new THREE.ParticleCanvasMaterial( {
+				var material = new THREE.SpriteCanvasMaterial( {
 
 					color: 0xffffff,
 					program: function ( context ) {
@@ -73,7 +73,7 @@
 
 				for ( var i = 0; i < 100; i ++ ) {
 
-					particle = new THREE.Particle( material );
+					particle = new THREE.Sprite( material );
 					particle.position.x = Math.random() * 2 - 1;
 					particle.position.y = Math.random() * 2 - 1;
 					particle.position.z = Math.random() * 2 - 1;

examples/canvas_lines_sphere.html

@@ -59,7 +59,7 @@
 				// particles
 
 				var PI2 = Math.PI * 2;
-				var material = new THREE.ParticleCanvasMaterial( {
+				var material = new THREE.SpriteCanvasMaterial( {
 
 					color: 0xffffff,
 					program: function ( context ) {
@@ -74,7 +74,7 @@
 
 				for ( var i = 0; i < 1000; i ++ ) {
 
-					particle = new THREE.Particle( material );
+					particle = new THREE.Sprite( material );
 					particle.position.x = Math.random() * 2 - 1;
 					particle.position.y = Math.random() * 2 - 1;
 					particle.position.z = Math.random() * 2 - 1;

examples/canvas_materials.html

@@ -116,7 +116,7 @@
 
 				}
 
-				particleLight = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: program } ) );
+				particleLight = new THREE.Sprite( new THREE.SpriteCanvasMaterial( { color: 0xffffff, program: program } ) );
 				particleLight.scale.x = particleLight.scale.y = particleLight.scale.z = 4;
 				scene.add( particleLight );
 

examples/canvas_materials_video.html

@@ -122,7 +122,7 @@
 				var amounty = 10;
 
 				var PI2 = Math.PI * 2;
-				var material = new THREE.ParticleCanvasMaterial( {
+				var material = new THREE.SpriteCanvasMaterial( {
 
 					color: 0x0808080,
 					program: function ( context ) {
@@ -139,7 +139,7 @@
 
 					for ( var iy = 0; iy < amounty; iy++ ) {
 
-						particle = new THREE.Particle( material );
+						particle = new THREE.Sprite( material );
 						particle.position.x = ix * separation - ( ( amountx * separation ) / 2 );
 						particle.position.y = -153
 						particle.position.z = iy * separation - ( ( amounty * separation ) / 2 );

examples/canvas_particles_floor.html

@@ -48,13 +48,13 @@
 
 				scene = new THREE.Scene();
 
-				var material = new THREE.ParticleBasicMaterial();
+				var material = new THREE.SpriteMaterial();
 
 				for ( var ix = 0; ix < AMOUNTX; ix++ ) {
 
 					for ( var iy = 0; iy < AMOUNTY; iy++ ) {
 
-						particle = new THREE.Particle( material );
+						particle = new THREE.Sprite( material );
 						particle.scale.y = 4;
 						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
 						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );

examples/canvas_particles_random.html

@@ -58,7 +58,12 @@
 
 				for ( var i = 0; i < 1000; i++ ) {
 
-					particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808008 + 0x808080, program: program } ) );
+					var material = new THREE.SpriteCanvasMaterial( {
+						color: Math.random() * 0x808008 + 0x808080,
+						program: program
+					} );
+
+					particle = new THREE.Sprite( material );
 					particle.position.x = Math.random() * 2000 - 1000;
 					particle.position.y = Math.random() * 2000 - 1000;
 					particle.position.z = Math.random() * 2000 - 1000;

examples/canvas_particles_shapes.html

@@ -168,13 +168,16 @@
 				var setTargetParticle = function() {
 
 					//hearts circleLines
-					var material = new THREE.ParticleCanvasMaterial( {  program: hearts, blending:THREE.AdditiveBlending } );
+					var material = new THREE.SpriteCanvasMaterial( {
+						program: hearts,
+						blending:THREE.AdditiveBlending
+					} );
 
 					material.color.setHSL(hue, 1, 0.75);
 					hue += 0.001;
 					if (hue>1) hue-=1;
 
-					particle = new THREE.Particle( material );
+					particle = new THREE.Sprite( material );
 
 					particle.scale.x = particle.scale.y = Math.random() * 20 +20;
 					particleCloud.add( particle );
@@ -190,9 +193,11 @@
 
 				};
 
-				var onParticleDead = function(particle) {
+				var onParticleDead = function( particle ) {
+
 					particle.target.visible = false;
-					particleCloud.remove(particle.target);
+					particleCloud.remove( particle.target );
+
 				};
 
 				sparksEmitter = new SPARKS.Emitter(new SPARKS.SteadyCounter(160));
@@ -332,7 +337,7 @@
 				emitterpos.y = -pointOnShape.y * 5 + 400;
 
 				// Pretty cool effect if you enable this
-				//particleCloud.rotation.y += 0.05;
+				// particleCloud.rotation.y += 0.05;
 
 				group.rotation.y += ( targetRotation - group.rotation.y ) * 0.05;
 				renderer.render( scene, camera );

examples/canvas_particles_sprites.html

@@ -45,11 +45,14 @@
 
 				scene = new THREE.Scene();
 
-				var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture( generateSprite() ), blending: THREE.AdditiveBlending } );
+				var material = new THREE.SpriteBasicMaterial( {
+					map: new THREE.Texture( generateSprite() ),
+					blending: THREE.AdditiveBlending
+				} );
 
 				for ( var i = 0; i < 1000; i++ ) {
 
-					particle = new THREE.Particle( material );
+					particle = new THREE.Sprite( material );
 
 					initParticle( particle, i * 10 );
 
@@ -111,7 +114,7 @@
 
 			function initParticle( particle, delay ) {
 
-				var particle = this instanceof THREE.Particle ? this : particle;
+				var particle = this instanceof THREE.Sprite ? this : particle;
 				var delay = delay !== undefined ? delay : 0;
 
 				particle.position.x = 0;

examples/canvas_particles_waves.html

@@ -51,7 +51,7 @@
 				particles = new Array();
 
 				var PI2 = Math.PI * 2;
-				var material = new THREE.ParticleCanvasMaterial( {
+				var material = new THREE.SpriteCanvasMaterial( {
 
 					color: 0xffffff,
 					program: function ( context ) {
@@ -70,7 +70,7 @@
 
 					for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
 
-						particle = particles[ i ++ ] = new THREE.Particle( material );
+						particle = particles[ i ++ ] = new THREE.Sprite( material );
 						particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
 						particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
 						scene.add( particle );

examples/js/controls/PathControls.js

@@ -246,7 +246,7 @@ THREE.PathControls = function ( object, domElement ) {
 			particleGeo = createSplineGeometry( spline, 10 ),
 			lineMat = new THREE.LineBasicMaterial( { color: 0xff0000, linewidth: 3 } ),
 			lineObj = new THREE.Line( lineGeo, lineMat ),
-			particleObj = new THREE.ParticleSystem( particleGeo, new THREE.ParticleBasicMaterial( { color: 0xffaa00, size: 3 } ) );
+			particleObj = new THREE.ParticleSystem( particleGeo, new THREE.ParticleSystemMaterial( { color: 0xffaa00, size: 3 } ) );
 
 		lineObj.scale.set( 1, 1, 1 );
 		parent.add( lineObj );

examples/misc_controls_fly.html

@@ -206,12 +206,12 @@
 
 				var stars;
 				var starsMaterials = [
-					new THREE.ParticleBasicMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
-					new THREE.ParticleBasicMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
-					new THREE.ParticleBasicMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
-					new THREE.ParticleBasicMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
-					new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
-					new THREE.ParticleBasicMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
+					new THREE.ParticleSystemMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
+					new THREE.ParticleSystemMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
+					new THREE.ParticleSystemMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
+					new THREE.ParticleSystemMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
+					new THREE.ParticleSystemMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
+					new THREE.ParticleSystemMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
 				];
 
 				for ( i = 10; i < 30; i ++ ) {

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -136,7 +136,6 @@
 			var radius = 200;
 
 			geometry = new THREE.BufferGeometry();
-			// geometry.dynamic = true;
 
 			geometry.addAttribute( 'position', Float32Array, particles, 3 );
 			geometry.addAttribute( 'customColor', Float32Array, particles, 3 );
@@ -149,7 +148,7 @@
 
 			sphere = new THREE.ParticleSystem( geometry, shaderMaterial );
 
-			//sphere.sortParticles = true;
+			// sphere.sortParticles = true;
 
 			var color = new THREE.Color( 0xffaa00 );;
 

examples/webgl_buffergeometry_particles.html

@@ -109,7 +109,7 @@
 
 				//
 
-				var material = new THREE.ParticleBasicMaterial( { size: 15, vertexColors: true } );
+				var material = new THREE.ParticleSystemMaterial( { size: 15, vertexColors: true } );
 
 				particleSystem = new THREE.ParticleSystem( geometry, material );
 				scene.add( particleSystem );

examples/webgl_camera.html

@@ -130,7 +130,7 @@
 
 				}
 
-				var particles = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { color: 0x888888 } ) );
+				var particles = new THREE.ParticleSystem( geometry, new THREE.ParticleSystemMaterial( { color: 0x888888 } ) );
 				scene.add( particles );
 
 				//

examples/webgl_geometry_shapes.html

@@ -111,7 +111,7 @@
 					// vertices from real points
 
 					var pgeo = points.clone();
-					var particles = new THREE.ParticleSystem( pgeo, new THREE.ParticleBasicMaterial( { color: color, size: 2, opacity: 0.75 } ) );
+					var particles = new THREE.ParticleSystem( pgeo, new THREE.ParticleSystemMaterial( { color: color, size: 2, opacity: 0.75 } ) );
 					particles.position.set( x, y, z + 75 );
 					particles.rotation.set( rx, ry, rz );
 					particles.scale.set( s, s, s );
@@ -128,7 +128,7 @@
 					// equidistance sampled points
 
 					var pgeo = spacedPoints.clone();
-					var particles2 = new THREE.ParticleSystem( pgeo, new THREE.ParticleBasicMaterial( { color: color, size: 2, opacity: 0.5 } ) );
+					var particles2 = new THREE.ParticleSystem( pgeo, new THREE.ParticleSystemMaterial( { color: color, size: 2, opacity: 0.5 } ) );
 					particles2.position.set( x, y, z + 125 );
 					particles2.rotation.set( rx, ry, rz );
 					particles2.scale.set( s, s, s );

examples/webgl_particles_billboards.html

@@ -81,7 +81,7 @@
 
 				}
 
-				material = new THREE.ParticleBasicMaterial( { size: 35, sizeAttenuation: false, map: sprite, transparent: true } );
+				material = new THREE.ParticleSystemMaterial( { size: 35, sizeAttenuation: false, map: sprite, transparent: true } );
 				material.color.setHSL( 1.0, 0.3, 0.7 );
 
 				particles = new THREE.ParticleSystem( geometry, material );

examples/webgl_particles_billboards_colors.html

@@ -86,7 +86,7 @@
 
 				geometry.colors = colors;
 
-				material = new THREE.ParticleBasicMaterial( { size: 85, map: sprite, vertexColors: true, transparent: true } );
+				material = new THREE.ParticleSystemMaterial( { size: 85, map: sprite, vertexColors: true, transparent: true } );
 				material.color.setHSL( 1.0, 0.2, 0.7 );
 
 				particles = new THREE.ParticleSystem( geometry, material );

examples/webgl_particles_dynamic.html

@@ -152,7 +152,7 @@
 				parent = new THREE.Object3D();
 				scene.add( parent );
 
-				var grid = new THREE.ParticleSystem( new THREE.PlaneGeometry( 15000, 15000, 64, 64 ), new THREE.ParticleBasicMaterial( { color: 0xff0000, size: 10 } ) );
+				var grid = new THREE.ParticleSystem( new THREE.PlaneGeometry( 15000, 15000, 64, 64 ), new THREE.ParticleSystemMaterial( { color: 0xff0000, size: 10 } ) );
 				grid.position.y = -400;
 				grid.rotation.x = - Math.PI / 2;
 				parent.add( grid );
@@ -245,7 +245,7 @@
 
 						c = ( i < clones.length -1 ) ? 0x252525 : color;
 
-						mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { size: 3, color: c } ) );
+						mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleSystemMaterial( { size: 3, color: c } ) );
 						mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 
 						mesh.position.x = x + clones[ i ][ 0 ];
@@ -263,7 +263,7 @@
 
 				} else {
 
-					mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleBasicMaterial( { size: 3, color: color } ) );
+					mesh = new THREE.ParticleSystem( geometry, new THREE.ParticleSystemMaterial( { size: 3, color: color } ) );
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = scale;
 
 					mesh.position.x = x;

examples/webgl_particles_random.html

@@ -92,7 +92,7 @@
 					color = parameters[i][0];
 					size  = parameters[i][1];
 
-					materials[i] = new THREE.ParticleBasicMaterial( { size: size } );
+					materials[i] = new THREE.ParticleSystemMaterial( { size: size } );
 
 					particles = new THREE.ParticleSystem( geometry, materials[i] );
 

examples/webgl_particles_sprites.html

@@ -99,7 +99,7 @@
 					sprite = parameters[i][1];
 					size   = parameters[i][2];
 
-					materials[i] = new THREE.ParticleBasicMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
+					materials[i] = new THREE.ParticleSystemMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
 					materials[i].color.setHSL( color[0], color[1], color[2] );
 
 					particles = new THREE.ParticleSystem( geometry, materials[i] );

examples/webgl_trails.html

@@ -64,7 +64,7 @@
 
 				}
 
-				var material = new THREE.ParticleBasicMaterial( { size: 1, vertexColors: THREE. VertexColors, depthTest: false, opacity: 0.5, sizeAttenuation: false, transparent: true } );
+				var material = new THREE.ParticleSystemMaterial( { size: 1, vertexColors: THREE. VertexColors, depthTest: false, opacity: 0.5, sizeAttenuation: false, transparent: true } );
 
 				var mesh = new THREE.ParticleSystem( geometry, material );
 				scene.add( mesh );