前言最近公司UI小姐姐问我能不能做个雪花效果图，最好能体现雪花的距离感（雪花远的时候小，远的时候大）关闭）。想了半天，一开始用canvas做雪花效果不是很满意，后来就用three.js做了雪花效果。效果还可以。先给大家看看效果吧。1：准备工作为了能够用three.js显示任何东西，我们需要三样东西：一个场景、一个相机和一个渲染器，这样我们就可以用相机渲染场景代码：functioninit(){container=document.createElement('分区');container.className='雪';document.body.appendChild（容器）；camera=newTHREE.PerspectiveCamera(75,SCREEN_WIDTH/SCREEN_HEIGHT,1,10000);//透视投影相机camera.position.z=1000;scene=newTHREE.Scene();场景。添加（相机）；renderer=newTHREE.CanvasRenderer();renderer.setSize(SCREEN_WIDTH,SCREEN_HEIGHT);//console.log(SCREEN_WIDTH,SCREEN_HEIGHT);varmaterial=newTHREE.ParticleBasicMaterial({map:newTHREE.Texture(particleImage)});2:在不同位置随机生成一定数量的雪花for(vari=0;i<200;i++){particle=newParticle3D（材质）；particle.position.x=Math.random()*2000-1000;particle.position.y=Math.random()*2000-1000;particle.position.z=Math.random()*2000-1000;粒子.scale.x=粒子.scale.y=1;scene.add(粒子);粒子.推（粒子）；}雪花位置优化for(vari=0;i1000)x-=2000;否则如果(x<-1000)x+=2000;如果(z>1000)z-=2000;否则如果(z<-1000)z+=2000;}}3:雪花远小近大的效果雪花远小近大的效果是通过改变相机位置camera.position.x+=(mouseX-camera.position.x)*0.05;camera.position.y+=(-mouseY-camera.position.y)*0.05;camera.lookAt（场景。位置）；renderer.render（场景，相机）；它是利用重力让他下落的，我们也可以通过改变它的大小来改变它的速度Particle3D=function(material){THREE.Particle.call(this,material);this.velocity=newTHREE.Vector3(0,-8,0);this.velocity.rotateX(randomRange(-45,45));this.velocity.rotateY(randomRange(0,360));this.gravity=newTHREE.Vector3(0,0,0);this.drag=1;};Particle3D.prototype=newTHREE.Particle();Particle3D.prototype.constructor=Particle3D;Particle3D.prototype.updatePhysics=function(){this.velocity.multiplyScalar(this.drag);this.velocity.addSelf(this.gravity);this.position.addSelf(this.velocity);}5：雪花旋转效果关于雪花的旋转，我也做了一定的优化THREE.Vector3.prototype.rotateY=function(angle){cosRY=Math.cos(angle*数学.PI/180);sinRY=Math.sin(角度*Math.PI/180);vartempz=this.z;;vartempx=this.x;this.x=(tempx*cosRY)+(tempz*sinRY);this.z=(tempx*-sinRY)+(tempz*cosRY);}活动页面活动页面的效果就不细说了，我在活动页面添加雪花效果。使用pointer-events:none意味着它不会捕获任何点击，而只是让事件渗透到它下面。.snow{位置：固定；顶部：0；左：0；z-索引：10000；转换：translate3d(0,0,0);宽度：100%；高度：100%；指针事件：无；}other这个活动页面还有一个问题，就是按住屏幕（向下滑动），雪花会卡住一会。我希望有人能帮我解决这个问题。我很感激。总结作为即将毕业的大四学生，这是我在公司实习做的第一个活动页面。希望能对大家有所帮助，互相学习，共同进步。当然也有不足的地方，请多多指教。大家有什么好的想法可以联系我的qq：137032979。码字不易，希望大家喜欢。路漫漫其修远兮，我们一起加油。
