How to produce Particle System in THREE.js

Question

I am making game in which I want to add smoke, flame and blast effect. I am using THREE.js library for the game making. I tried lots of technique but can't find the result. I tried SPARK.js library and the particle system of THREE.js itself but did not able to produce the desired results. I am using r51 version of THREE.js. Any one can help in this regard. Thanks

Solution 1

I have recently written a Particle Engine that is capable of the special effects you described, which currently works with Three.js v.56:

http://stemkoski.github.io/Three.js/Particle-Engine.html

and see the blog post http://stemkoski.blogspot.com/2013/06/creating-particle-effects-engine-in.html for related details.

[Update Sept. 2013] The Particle Engine has been greatly improved and is still undergoing development at http://squarefeet.github.io/ShaderParticleEngine/

Solution 2

The accepted answer's library no longer works with latest THREE.js (r111) and it seems to be abandoned.

Wrote my own lib if anyone interested:

https://github.com/RonenNess/partykals

Live demo: https://ronenness.github.io/partykals/demo/index.html

Comments

[Omiod]

That engine looks great, I'll try to use it today. I noticed some quirks (maybe z-buffer issues) in the clouds and smoke examples, sometime the particle flicker. Do you think this can be fixed?

[Stemkoski]

Your right, I've also noticed the particle flicker in those examples. I bet it can be fixed, but I'm not sure how. If you come up with any ideas, please post here or let me know!

[Hobbes]

This is absolutely awesome! Thank you.

[Agent Zebra]

Anyone know any cool implementation of moving three.js fog? Please share links!

[Saeid Nourian]

It looks like your particle library is no longer compatible with the latest version of ThreeJS. Any plans for updates?

[Ronen Ness]

Tried using it with latest threejs (r111) and nothing is seen on screen + there are several warning messages. is the lib deprecated or did I do something wrong? Thanks,