Added general purpose particle system example: campfire.

examples/files.js

@@ -156,6 +156,7 @@ var files = {
 		"webgl_octree",
 		"webgl_octree_raycasting",
 		"webgl_panorama_equirectangular",
+		"webgl_particles_general",
 		"webgl_performance",
 		"webgl_performance_doublesided",
 		"webgl_performance_static",

examples/js/particles_general/Atlas.js

+/**
+* @author Mark Kellogg - http://www.github.com/mkkellogg
+*/
+
+THREE.Atlas = function( texture, createFirstFullFrame ) {
+
+	this.texture = texture;
+	this.imageCount = 0;
+	this.imageDescriptors = [];
+
+	if ( createFirstFullFrame ) {
+
+		this.addImageDescriptor( 0, 1, 1, 0 );
+
+	}
+
+};
+
+THREE.Atlas.ImageDescriptor = function( left, top, right, bottom ) {
+
+	this.left = left;
+	this.top = top;
+	this.right = right;
+	this.bottom = bottom;
+
+};
+
+THREE.Atlas.prototype.addImageDescriptor = function( left, top, right, bottom ) {
+
+	this.imageDescriptors[ this.imageCount ] = new THREE.Atlas.ImageDescriptor( left, top, right, bottom );
+	this.imageCount ++;
+
+};
+
+THREE.Atlas.prototype.getImageDescriptor = function( index ) {
+
+	return this.imageDescriptors[ index ];
+
+};
+
+THREE.Atlas.prototype.getTexture = function() {
+
+	return this.texture;
+
+};
+
+THREE.Atlas.createGridAtlas = function( texture, left, top, right, bottom, xCount, yCount, reverseX, reverseY ) {
+
+	var atlas = new THREE.Atlas( texture );
+
+	var width = right - left;
+	var height = top - bottom;
+
+	var xBlockSize = width / xCount;
+	var yBlockSize = height / yCount;
+
+	var xInc = 1;
+	var yInc = 1;
+
+	var xStart = 0;
+	var yStart = 0;
+
+	var xFinish = xCount;
+	var yFinish = yCount;
+
+	if ( reverseX ) {
+
+		xInc = - 1;
+		xStart = xCount - 1;
+		xFinish = - 1;
+
+	}
+
+	if ( reverseY ) {
+
+		yInc = - 1;
+		yStart = yCount - 1;
+		yFinish = - 1;
+
+	}
+
+	for ( var y = yStart; y != yFinish; y += yInc ) {
+
+		for ( var x = xStart; x != xFinish; x += xInc ) {
+
+			var currentLeft = left + xBlockSize * x;
+			var currentTop = bottom + yBlockSize * ( y + 1 );
+			var currentRight = currentLeft + xBlockSize;
+			var currentBottom = currentTop - yBlockSize;
+
+			atlas.addImageDescriptor( currentLeft, currentTop, currentRight, currentBottom );
+
+		}
+
+	}
+
+	return atlas;
+
+};

examples/js/particles_general/ParticleModifiers.js

+/**
+* @author Mark Kellogg - http://www.github.com/mkkellogg
+*/
+
+THREE.Particles = THREE.Particles || {};
+
+//=======================================
+// Base Modifier
+//=======================================
+
+THREE.Particles.Modifier = function() {
+
+
+}
+
+//=======================================
+// Random Modifier
+//=======================================
+
+THREE.Particles.RandomModifier = function( params ) {
+
+	THREE.Particles.Modifier.call( this );
+
+	if ( ! params ) params = {};
+
+	if ( ! params.range ) {
+
+		throw "Particles.RandomModifier: No range specified.";
+
+	}
+
+	if ( ! params.offset ) {
+
+		throw "Particles.RandomModifier: No offset specified.";
+
+	}
+
+	this.range = params.range;
+	this.offset = params.offset;
+	this.rangeType = params.rangeType || THREE.Particles.RangeType.Cube;
+	this.rangeEdgeClamp = params.rangeEdgeClamp !== undefined && params.rangeEdgeClamp !== null ? params.rangeEdgeClamp : false ;
+
+}
+
+THREE.Particles.RandomModifier.prototype = Object.create( THREE.Particles.Modifier.prototype );
+
+THREE.Particles.RandomModifier.prototype.update = function( particle, target ) {
+
+	if ( this.rangeType == THREE.Particles.RangeType.Cube ) {
+
+		THREE.Particles.Random.getRandomVectorCube( target, this.offset, this.range, this.rangeEdgeClamp );
+
+	} else if ( this.rangeType == THREE.Particles.RangeType.Sphere ) {
+
+		THREE.Particles.Random.getRandomVectorSphere( target, this.offset, this.range, this.rangeEdgeClamp );
+
+	}
+
+}
+
+
+//=======================================
+// FrameSet Modifier
+//=======================================
+
+THREE.Particles.FrameSetModifier = function( frameset ) {
+
+	THREE.Particles.Modifier.call( this );
+
+	this.frameset = frameset;
+
+}
+
+THREE.Particles.FrameSetModifier.prototype = Object.create( THREE.Particles.Modifier.prototype );
+
+THREE.Particles.FrameSetModifier.prototype.update = function( particle, target ) {
+
+	this.frameset.interpolateFrameValues( particle.age, target );
+
+}
+
+
+//=======================================
+// EvenIntervalIndex Modifier
+//=======================================
+
+THREE.Particles.EvenIntervalIndexModifier = function( totalSteps ) {
+
+	THREE.Particles.Modifier.call( this );
+	this.totalSteps = Math.floor( totalSteps || 1 );
+
+}
+
+THREE.Particles.EvenIntervalIndexModifier.prototype = Object.create( THREE.Particles.Modifier.prototype );
+
+THREE.Particles.EvenIntervalIndexModifier.prototype.update = function( particle, target ) {
+
+	var fraction = particle.age / particle.lifeSpan;
+	var step = Math.floor( fraction * this.totalSteps );
+	if ( step == this.totalSteps && step > 0 ) step --;
+
+	target.set( step, step, step );
+
+}
+

examples/js/particles_general/ParticleSystemFrameset.js

+/**
+* @author Mark Kellogg - http://www.github.com/mkkellogg
+*/
+
+THREE.Particles = THREE.Particles || {};
+
+THREE.Particles.FrameSet = function( timeFrames, valueFrames, isScalar ) {
+
+	this.timeFrames = timeFrames || [];
+	this.valueFrames = valueFrames || [];
+
+}
+
+THREE.Particles.FrameSet.prototype.findNextFrameForTimeValue = function( t ) {
+
+	var frameIndex = 0;
+
+	while ( frameIndex < this.timeFrames.length && this.timeFrames[ frameIndex ] < t ) {
+
+		frameIndex = frameIndex + 1;
+
+	}
+
+	return frameIndex;
+
+}
+
+THREE.Particles.FrameSet.prototype.calculateFraction = function( a, b, z ) {
+
+	return ( z - a ) / ( b - a );
+
+}
+
+THREE.Particles.FrameSet.prototype.interpolateFrameValues = function( t, target ) {
+
+	var nextFrameIndex = this.findNextFrameForTimeValue( t );
+	var currentFrameIndex = nextFrameIndex - 1;
+
+	if ( nextFrameIndex == 0 ) {
+
+		target.copy( this.valueFrames[ 0 ] );
+
+	} else if ( nextFrameIndex == this.timeFrames.length ) {
+
+		target.copy( this.valueFrames[ currentFrameIndex ] );
+
+	} else {
+
+		var fraction = this.calculateFraction( this.timeFrames[ currentFrameIndex ], this.timeFrames[ nextFrameIndex ], t );
+
+		target.copy( this.valueFrames[ currentFrameIndex ] );
+		target.lerp( this.valueFrames[ nextFrameIndex ], fraction );
+
+	}
+
+}

examples/js/particles_general/ParticleSystemUtil.js

+/**
+* @author Mark Kellogg - http://www.github.com/mkkellogg
+*/
+
+var ParticleSystemUtil = {
+
+	loadingManager: undefined,
+	objLoader: undefined,
+	imageLoader: undefined,
+
+	initializeLoadingManager: function() {
+
+		this.loadingManager = new THREE.LoadingManager();
+		this.loadingManager.onProgress = function( item, loaded, total ) {
+
+			console.log( "Loaded " + loaded + " items out of " + total + ": " + item);
+
+		};
+
+	},
+
+
+	loadObj: function( objFile, textureFile, material, onMesh, onLoadComplete ) {
+
+		var onProgress = function( xhr ) {
+
+			if ( xhr.lengthComputable ) {
+
+				var percentComplete = xhr.loaded / xhr.total * 100;
+				//console.log( Math.round( percentComplete, 2 ) + '% downloaded' );
+
+			}
+
+		};
+
+		var onError = function( xhr ) {
+
+			console.log( "ERROR: loadObj() - " + xhr );
+
+		};
+
+		if ( ! this.objLoader ) {
+
+			this.objLoader = new THREE.OBJLoader( loadingManager );
+
+		}
+		if ( ! this.imageLoader ) {
+
+			this.imageLoader = new THREE.ImageLoader( this.loadingManager );
+
+
+		}
+
+		var texture = new THREE.Texture();
+		var _this = this;
+		this.imageLoader.load( textureFile, function( image ) {
+
+			texture.image = image;
+			texture.needsUpdate = true;
+			
+			_this.objLoader.load( objFile, function( object ) {
+
+				object.traverse( function( child ) {
+
+					if ( child instanceof THREE.Mesh ) {
+
+						child.material = material;
+						child.material.map = texture;
+
+						if ( onMesh ) {
+
+							onMesh ( child );
+
+						}
+
+					}
+
+				} );
+
+
+				console.log( "Finished loading model: " + objFile );
+				if ( onLoadComplete ) {
+
+					onLoadComplete( object );
+
+				}
+
+			}, onProgress, onError );
+
+		} );
+
+	}
+
+}

examples/js/particles_general/Particles.js

+/**
+* @author Mark Kellogg - http://www.github.com/mkkellogg
+*/
+
+THREE.Particles = THREE.Particles || {};
+
+THREE.Particles.RangeType = Object.freeze( {
+
+	Cube: 1,
+	Sphere: 2,
+	Plane: 3
+
+} );
+
+THREE.Particles.Constants = Object.freeze( {
+
+	VerticesPerParticle: 6,
+	DegreesToRadians: Math.PI / 180.0
+
+} );
+
+
+THREE.Particles.Random = THREE.Particles.Random || {};
+
+THREE.Particles.Random.getRandomVectorCube = function( vector, offset, range, edgeClamp ) {
+
+	var x = Math.random() - 0.5;
+	var y = Math.random() - 0.5;
+	var z = Math.random() - 0.5;
+	var w = Math.random() - 0.5;
+
+	vector.set( x, y, z, w );
+
+	if ( edgeClamp ) {
+
+		var max = Math.max ( Math.abs( vector.x ), Math.max ( Math.abs( vector.y ), Math.abs( vector.z ) ) );
+		vector.multiplyScalar( 1.0 / max );
+
+	}
+
+	vector.multiplyVectors( range, vector );
+	vector.addVectors( offset, vector );
+
+}
+
+THREE.Particles.Random.getRandomVectorSphere = function( vector, offset, range, edgeClamp ) {
+
+	var x = Math.random() - 0.5;
+	var y = Math.random() - 0.5;
+	var z = Math.random() - 0.5;
+	var w = Math.random() - 0.5;
+
+	vector.set( x, y, z, w );
+	vector.normalize();
+
+	vector.multiplyVectors( vector, range );
+
+	if ( ! edgeClamp ) {
+
+		var adjust = Math.random() * 2.0 - 1.0;
+		vector.multiplyScalar( adjust );
+
+	}
+
+	vector.addVectors( vector, offset );
+
+}
+
+THREE.Particles.SingularVector = function( x ) {
+
+	this.x = x;
+
+}
+
+
+THREE.Particles.SingularVector.prototype.copy = function( dest ) {
+
+	this.x = dest.x;
+
+}
+
+THREE.Particles.SingularVector.prototype.set = function( x ) {
+
+	this.x = x;
+
+}
+
+THREE.Particles.SingularVector.prototype.normalize = function() {
+
+	//return this;
+
+}
+
+THREE.Particles.SingularVector.prototype.multiplyScalar = function( x ) {
+
+	this.x *= x;
+
+}
+
+THREE.Particles.SingularVector.prototype.lerp = function( dest, f ) {
+
+	this.x = this.x + f * ( dest.x - this.x );
+
+}
+
+THREE.Particles.SingularVector.prototype.addVectors = function( vector, offset ) {
+
+	vector.x += offset;
+
+}
+
+THREE.Particles.SingularVector.prototype.multiplyVectors = function( vector, rangeVector ) {
+
+	vector.x *= rangeVector.x;
+
+}
+

examples/models/campfire/brownrock.mtl

+# Blender MTL File: 'None'
+# Material Count: 1
+
+newmtl brownrock
+Ns 19.607843
+Ka 0.000000 0.000000 0.000000
+Kd 0.470588 0.470588 0.470588
+Ks 0.000000 0.000000 0.000000
+Ke 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 1

examples/models/campfire/campfire.mtl

+# Blender MTL File: 'None'
+# Material Count: 1
+
+newmtl Material__2
+Ns 1.960784
+Ka 0.588000 0.588000 0.588000
+Kd 0.588000 0.588000 0.588000
+Ks 0.000000 0.000000 0.000000
+Ke 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 2
+map_Kd campfire_texture.png

examples/models/campfire/pinetree.mtl

+# Blender MTL File: 'None'
+# Material Count: 1
+
+newmtl pinetree
+Ns 19.607843
+Ka 1.000000 1.000000 1.000000
+Kd 0.470588 0.470588 0.470588
+Ks 0.000000 0.000000 0.000000
+Ke 0.000000 0.000000 0.000000
+Ni 1.000000
+d 1.000000
+illum 1
+map_Kd pinetree.png