Creating a Smoke Effect in Three.JS

Creating Smoke

The first step of this project consists of creating the particles that make up our smoke. Here, the smoke effect is composed of around a hundred independent elements in motion.

For starters, let’s create a Geometry and Material lot that will be used in the instantiation of our particles :

var smokeTexture = new THREE.TextureLoader().load('smoke.png');
var smokeGeometry = new THREE.PlaneGeometry(300,300);
var smokeMaterial = new THREE.MeshLambertMaterial({ map: smokeTexture, opacity: 0.7, transparent: true});

Each of our smoke particles will be composed of a PlaneGeometry Geometry 3D object and a Material based on a semi transparent texture.

Next, we create an Array structure designated for listing the particles :

var smokeParticles;

[...]

smokeParticles = [];

Now everything is ready ! We can begin creating the elements of our visual effect :

for (var i = 0; i < 90; i++)
{	
	var smoke_element = new THREE.Mesh(smokeGeometry,smokeMaterial);
	smoke_element.scale.set(2, 2, 2);
	smoke_element.position.set( Math.random()*1000-500, Math.random()*1000-500, Math.random()*1000-100);
	smoke_element.rotation.z = Math.random() * 360;
			
	scene.add(smoke_element);
	smokeParticles.push(smoke_element);
}

We define a random position and rotation for each particle composing our smoke. Also note that the elements are added in the smokeParticles list.

Animating the visual effect

Our scene is now ready!

The final step of this project is to increment the rotational value of each particle in our main loop :

var delta = clock.getDelta();
for(var i = 0; i < smokeParticles.length ; i++)
{
    smokeParticles[i].rotation.z += (delta * 0.2);
}