使用three.js写烟火、下雨粒子系统

three.js是运行在浏览器的3D引擎，可以创造各种三维场景，对于js的使用者来说是一个非常好上手的图形学工具，使用three.js的精灵粒子可以开发出下雨、下雪、烟花等仿真场景。

一、下雨天时粒子的运动

1.1生成粒子

使用精灵粒子，通过for循环来生成大量的精灵点，和粒子所需的material，通过读取贴图。

 var textureTree=new THREE.TextureLoader().load("rain.png");
      
      var group=new THREE.Group();
      for(let i=0;i<400;i++){
          var spriteMaterial=new THREE.SpriteMaterial(
              {
                  map:textureTree
              }
          );
           var sprite=new THREE.Sprite(spriteMaterial);
       group.add(sprite);
           scene.add(group);

1.2.设置粒子运动的轨迹

在渲染函数中设置每一个精灵粒子的运动轨迹，粒子每秒向下移动1像素，当精灵粒子在纵轴方向position.y<0时，设置它回到起始点position.y=200;

function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
        group.children.forEach(sprite=>{
            sprite.position.y-=1;
            if(sprite.position.y<0){
                sprite.position.y=200;
            }
        });

      }

实现效果如图

二、烟火粒子运动

2.1.烟火向上爬升

在渲染函数render中设置，当每渲染一次后，让烟火的y值增大，沿着直线的轨迹爬升。

  function render(){
		delta = 10 * clock.getDelta();
		var speed = 80;
		delta = delta < 2 ? delta : 2;
		var dur = new Date().getTime() - t1; 
		if (dur < 1800) {
			var k = 0;
			group.traverse(function(child) {
				if (child.position.y < 0) {
					child.position.y += delta * speed * Math.random();
					child.position.x = child.position.x;
				}	        
			});

		

		}

2.2烟火爆炸

在烟火爆炸时将粒子的形状设置为一个球，将球表面的点的（x,y,z）坐标赋值给粒子的坐标，球的表面有多点则生成多少粒子点，采用for循环来生成粒子。使用TweenMax来设置粒子的运动的动画，起始所有的精灵点设置在一点处，第二步将粒子运动设置为一个球，第三步让粒子下落，设置y坐标。

var geometry=new THREE.SphereGeometry(200,50,50);
		
		var vl=geometry.vertices.length;
		
		console.log(vl);
		var particle;
		var group=new THREE.Group();

	
		
		var tml=function(){
		for(let i=0;i<vl;i++){
			var material=new THREE.SpriteMaterial({
			color:Math.random()*0x808008+0x808080,
			size:3
			
			});
			particle=new THREE.Sprite(material);
			

	particle.position.x=0;
	particle.position.y=-500;
	particle.position.z=0;
	particle.scale.x=particle.scale.y=Math.random()*5;
	var timerandom = 1*Math.random();	
		
	TweenMax.to(
				particle.position,
				timerandom,
				{x:geometry.vertices[i].x+(0.5-Math.random())*100,y:geometry.vertices[i].y+(0.5-Math.random())*100,z:geometry.vertices[i].z+Math.random()*100,delay:1.8,
				
				} 
			);

			TweenMax.to(
				particle.position,
				timerandom,
				{y:'-=1500',z:'300',
				delay:1.8+timerandom,
				ease:Power2.easeIn
				
			});
			
		//	particle.position.x=0;
		//	particle.position.y=-500;
		//	particle.position.z=0;


			group.add( particle );
		}
	}

结果：
烟火上升：

烟火爆炸：

源码：
https://download.csdn.net/download/bigorange1/85371977?spm=1001.2014.3001.5503
参考文章：
1.https://cloud.tencent.com/developer/article/1004960
2.http://www.webgl3d.cn/Three.js/