Créer un effet de fumée avec Three.JS

Création de la fumée

La première étape de ce projet consiste a créer les particules composant notre fumée. Ici, l’effet de fumée est composé d’une centaine d’éléments indépendants en mouvement.

Dans un premier temps, créons un lot Geometry et Material qui sera utilisé dans l’instanciation de nos particules :

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});

Chacune de nos particules de fumée seront composées d’un objet 3D de Geometry PlaneGeometry et d’un Material basé sur une texture semi transparente.

Puis, nous créons une structure Array destinée à lister les particules :

var smokeParticles;

[...]

smokeParticles = [];

Tout est désormais prêt ! Nous pouvons commencer à créer les éléments de notre effet visuel :

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);
}

Nous définissons une position et une rotation aléatoire pour chaque particule composant notre fumée. Notons également que les éléments sont ajoutés dans la liste smokeParticles.

Animation de l’effet visuel

Notre scène est désormais prête !

La dernière étape de ce projet consiste à incrémenter la valeur de rotation de chaque particule dans notre boucle principale :

var delta = clock.getDelta();

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

Résultat final