Creating 3D smoke particles in Three JS

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?

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:

And some particle textures for experimentation:


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!

1 Like

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.

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

1 Like

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.