Writing a Particle System (using Three.js)

Follow me on:

What we'll cover:
* Getting simple particles on the screen
* Alpha / additive blending
* More complex parameter animation.

Just treat this as a jumping off point for your own 3d projects, there's lots of ways you can go with this but it often helps to have a basic project you can build from.

I will be following up this project with one that goes into detail on combining additive and alpha blending, to get that integrated smoky/fiery effect, stay tuned.

Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.

[ajgunn]

dude stop rocking my world. you're comprehensive and simple-but-not-stupid attitude on this... it's got me moving. thanks!

[treelineresearch]

These videos are amazing, never change the style.
It's like all the good parts of a hour long dev video and none of the fluff and slow typing.

[Stargazerm]

Please keep on making these, good resources are so scarce in WebGL niche still.

[micowata]

This video makes me feel so calm... thanks for that too!

[JayWong]

Thank you so much for the great tutorial and detailed explanation!! The best I've seen on three.js + particle

[danesmith]

This is awesome! maybe a video on particle collision would be cool. Thanks for all the good videos.

[montoyland]

Can't wait for the update where you discuss dynamically switching blending modes from "additive" to "normal" in order to turn the fire into smoke. I would also love to see the use-case where you tie the particle's spline to a texture in a sprite sheet so that you can use an animated texture for the particle.

[Lambparade]

Great videos. The best three.js videos I've seen.

[alexpineda]

That looks amazing and I want that! Thanks so much for your straight forward examples!

[dogfightx_com]

pretty good tutorial, awesome, thank you for doing so good particle system tutorial

[syedmraza]

Good work :P Definitely going to put this in my game sometime next month. Happy Coding!

[Chadderbox]

Really cool! I honestly didn't know how much you could do with JavaScript.

[pixelfingers]

Very good video, well explained, thank you 😊 Subscribed!

[yxwong]

First of all thank you for this wonderful video, was wondering how to achieve particle stays in world space (let say in this video case, I wanted to launch the rocket and the particle will leave a trail)

[mayupai]

thanks for your amazing tutorial, how to do the black smoke effect?

[piegpa]

Mate, this is insane! Keep on posting new videos!

[chavis]

This is an amazing video, thanks for sharing it. I'm having an issue where the fire loads and is coming down, but if I look too far up or too far down the fire disappears. when I look at the right angle I can see the fire. Any thoughts on why?

[josemanuelromeroperez]

Hey! I have a question. Is it possible to make the particles (the pngs) not follow the camera? I have been trying to change the shaders but i haven't manage to achieve this :(

[buzbuz-]

I have turned this into a Particle System module, but would like to make it much larger (for use with a volcano). I have increased the size of the textures and the distance between them. I have tried increasing the life of the particles, but this does not appear to increase the height of the plume. Instead, the particles create an ever increasing ball of smoke at the top. Increasing vertical speed seems to eliminate this problme, but that begins to look too fast. Which other variable(s) do I need to change to increase the height, but not the speed? Thanks!

[beardedbrain]

I'm learning JavaScript. Can I make any game like RPG, Roguelike or Quest game on JS?