粒子动画在ThreeJs中可以通过多种方式实现本例使用Sprite类构建粒子Sprite类官方解释SpriteAspriteisaplanethatalwaysfacetothecamera,通常应用部分透明的纹理。精灵不投射阴影，设置castShadow=true将无效。大概意思是：这个类创建的对象是一个始终面向相机的平面，可以对其应用纹理。Sprite对象不能添加阴影，所以castShadow属性无效首先我们创建场景和cameracontainer=document.createElement('div');document.body.appendChild(container);camera=newTHREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,10000);camera.position.set(0,0,120);scene=newTHREE.Scene();然后使用Sprite创建粒子vartextureList=[pic1,pic2,pic3,pic4,pic5,pic6,pic7,pic8,pic9,pic10]vartextureLoader=newTHREE.TextureLoader();vartextureId=parseInt(Math.random()*100)%10vartexture=textureLoader.load(textureList[textureId]);varparticle=newTHREE.Sprite(newTHREE.SpriteMaterial({map:texture}));生成随机数，随机获取贴图资源，使用Sprite类创建粒子particle.position.x=Math.round(Math.random()*winHeight*1000)%200+120;particle.position.y=Math.round(Math.random()*winHeight*10000)%100+60;particle.position.z=Math.random()*3-30;particle.scale.x=particle.scale.y=Math.round(Math.random()*50)%5+10;使用随机数来设置粒子的位置和大小，因为Sprite类是要创建一个Alwaysfacethecamera的脸，也就是说不能使用flipping让花瓣有翻转的效果但我需要为花瓣添加翻转效果。我的实现思路是，当一个2d元素翻转过来的时候，其实就相当于压缩了它的x轴尺寸，所以我设置一个当前x轴尺寸和初始变形速度particle.sizeX=particle.scale.x;particle.xScaleSpeed=-0.08;以下是所有粒子初始化的代码for(vari=0;i<30;i++){vartextureLoader=newTHREE.TextureLoader();vartextureId=parseInt(Math.random()*10);vartexture=textureLoader.load(textureList[textureId]);varparticle=newTHREE.Sprite(newTHREE.SpriteMaterial({map:texture}));particle.position.x=Math.round(Math.random()*winHeight*1000)%200+120;particle.position.y=Math.round(Math.random()*winHeight*10000)%100+60;particle.position.z=Math.random()*3-30;particle.scale.x=particle.scale.y=Math.round(Math.random()*50)%5+10;particle.sizeX=particle.scale.x;particle.xScaleSpeed=-0.08;particle.speed=Math.round(Math.random()*10)/50;粒子.推（粒子）；scene.add(particle);}创建粒子后创建canvasRenderrenderer=newTHREE.CanvasRenderer({alpha:true});renderer.setClearColor("#ffffff",0);renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth,winHeight);container.appendChild(renderer.domElement);因为花瓣准备从左上往右下落，所以每次渲染图片的时候，都需要将花瓣偏移到右下particles[i].position.x+=particles[i].speed;这个速度是我在创建粒子的时候随机产生的，为了让每一片花瓣的速度都不同particles[i].position.y-=particles[i].speed+0.1;每次渲染时给y轴加一个偏移量，因为这个效果需要在竖屏上显示，所以y轴速度比x轴快，效果会更好particles[i].scale.x+=粒子[i].xScaleSpeed;然后每次渲染的时候给粒子的形状加上一个变形量if(particles[i].scale.x<-particles[i].sizeX){particles[i].xScaleSpeed=0.08}if(particles[i].scale.x>=particles[i].sizeX){particles[i].xScaleSpeed=-0.08}需要模拟花瓣翻转的效果。当当前变形超过原来的尺寸时，变形方向变为相反的方向（原来由大变小）if(particles[i].scale.x<0.3&&particles[i].scale.x>0){particles[i].scale.x=-0.3}if(particles[i].scale.x>-0.3&&particles[i].scale.x<0){particles[i].scale.x=0.3}这里我们完成了粒子下落+翻转的动力学我们还需要在粒子超出效果显示区域时，重新给粒子分配一个初始位置if(particles[i].position.y<-100||particles[i].position.x>50|particles[i].position.z>150){particles[i].position.x=-Math.round(Math.random()*winWidth*1000)%(winWidth);粒子[i].position.y=Math.round(Math.random()*winHeight*1000)%200+120粒子[i].position.z=Math.random()*5-30;particles[i].speed=Math.round(Math.random()*10)/30;}这样花瓣飘浮的效果就完成了代码下载链接：https://pan.baidu.com/s/1pKKkqrL密码：ww7j
