Creating 3D smoke particles in Three JS

[Raphael_Dev]

So, I’m using this fire mesh that I found on web, but it doesn’t come with smoke. I’m trying to create a smoke particle… but as you can see in the video, the results are not good. Can someone help me with something ready-to-use, or some links where I could learn from a video on how to create a better particle system for this smoke?

[manthrax]

Try setting:

depthWrite: false on your smoke material? That may remove the clipping around the particle edges.

There’s a bunch of approaches for rendering smoke but the one you’re using can be pretty effective with lots of particles and/or different particle sprite textures and parameter animation.

Here’s a few resources on other particle systems:

Sometimes folks start with the stemkoski one and optionally modify it: Particle Engine (Three.js)

Another more complex/slicker library:
Nebula particle engine: GitHub - creativelifeform/three-nebula: WebGL based particle system engine for three.js

A thread on smoke:

How to make 3D smoke

If something like this is what you want, then it’s achievable with sprites like @Chaser_Code has suggested. In the gif I move sprites up and enlarge them slightly as they move. At some point their transparency starts to fade until they are no longer visible. Add some randomization into the process and a bit of coloring - and you get something looks quite believable. [smoke_particles_2022_02_06] here are the color and scale(controls size) curves I use for the particles: [image]

And some particle textures for experimentation:

Particle Pack · Kenney

[Raphael_Dev]

I was trying to use the stemkoski one, but it isn’t compatible with my Three JS version that I’m using rn. I tryed to make it compatible, but I couldn’t. I’m aiming to create a smoke like the one on one of his examples… And I saw this sprite one too, but didn’t understand what he meant with sprites?

Also, thanks for the depthWrite property, it solved the issue about the clipping right into the spot!

[manthrax]

A sprite is a term for a plane that always faces the camera. It comes from the 2d games world.
THREE.Sprite is the threejs version of a sprite.

[Pierre_Debroux]

i think you should use smokeMaterial.depthWrite = false; than you are not gonna see the edge

smkMaterial.depthWrite = false

ot gonna see the edge

smkMaterial.depthWrite = true

[phil_crowther]

If you have not already done so, you might take a look at a couple of YouTube three.js tutorials on the subject by SimonDev. Here is the link to the second one. It shows how to create emitters where fire changes into smoke. You might be able to adapt some of those techniques into your emitter.