The demo below is one of the many three.js examples. While im on it, the example directory is a gold mine. Go dig in it to understand how to code three.js :) Back to the point, this demo is rather cool no ? You want to do the same ? During this short post, let me walk you walk thru the code for particles in this example.
Lets Get Started
First a few words on what is a particle system. It is usually composed of 2 big parts: the emitter and the particle itself. Emitter creates particles. Particles are usually smallish objects on the screen. As you got many particles at the same time, they appears a single mass.
Let’s create an emitter
First we create the emitter like this.
emitter is the main object we will play with.
counter controls how frequently particles are created. Here it will
emit 500 particles per seconds.
Now let’s start emit particles.
Sparks.js has a very flexible core. It mainly uses two stacks of functions. Initializers is the stack run at the creation of a particle. Actions is another stack which is run at every step of a particle life. Those functions are run in order. Up to you to configure them to fit your needs. You can easily code your own initializer or action. Dont worry it got a bunch of predefined ones.
Lets me walk you thru the ones used in our example. The whole stack is below.
emitter.addInitializer() to push a new initializer, and
to remove it, not too hard :)
1 2 3 4 5
SPARKS.Position(zone) initializer set the original position of the particle.
zone provide a location in space.
new SPARKS.PointZone( emitterpos ) means the particles will always start from this specific point in space.
It is possible to have other zones.
SPARKS.LineZone( startVector3, endVector3 ) represents a line between 2 points, so
your particle would start anywhere on this line.
SPARKS.Lifetime(mintime, maxtime) initializer set particle’s lifetime.
You can specify a range and a random value will be assigned.
Don’t forget to add
SPARKS.Age action to handle its lifetime.
And the last one.
SPARKS.Velocity(zone) set particle’s velocity based on a
The initializer stack is setup the particle at the begining of its life.
Let’s see what happen during this life.
Let’s do some actions
Actions are performed at every step of a particle life.
Same as with initializers,
emitter.addAction() to push a new action,
emitter.removeAction() to remove it.
For our examples the whole action stack is this.
1 2 3 4
Now lets details it.
We have already seen
SPARKS.Age(). It is handle the lifetime of each particle.
SPARKS.Accelerate(x,y,z) changes the velocity by adding a fixed amount at every step.
This one produces a gravity effect with a negative
SPARKS.Move() makes the particles move in our 3D space.
SPARKS.RandomDrift(x,y,z) changes the velocity by adding a random amount at every step.
I hope this short introduction got you excited about sparks.js. Next posts on the particle series may be a UI editor, stay tuned! I find sparks.js clean and flexible. Flexibility is very important for particles. It helps provide a wide variety of effect in your games/demos. For more informations and authoritative answer, see the github repository. That’s all for today folks, have fun.