记一次雪花效果

前言最近，公司UI小姐姐告诉我能不能做一个关于雪花的效果图，最好是能体现雪花的远近感（远的时候比较小 近的时候雪花比较大），我寻思良久，一开始用canvas做了一个雪花效果 感觉不是很满意，然后就该用了three.js做了一个关于雪花的效果。效果还行 给大家先看一下效果。附上地址在线预览：雪花活动页GitHub地址：传送门 如果觉的有用，记得帮我fork和star一下 谢谢1：准备工作为了能够显示任何带有three.js的东西，我们需要三件事：场景，相机和渲染器，这样我们就可以用相机渲染场景代码：function init() { container = document.createElement(‘div’); container.className = ‘snow’; document.body.appendChild(container); camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 ); //透视投影相机 camera.position.z = 1000; scene = new THREE.Scene(); scene.add(camera); renderer = new THREE.CanvasRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); // console.log(SCREEN_WIDTH, SCREEN_HEIGHT); var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );2:随机生成不同位置一定数量的雪花for (var i = 0; i < 200; i++) { particle = new Particle3D( material); particle.position.x = Math.random() * 2000 - 1000; particle.position.y = Math.random() * 2000 - 1000; particle.position.z = Math.random() * 2000 - 1000; particle.scale.x = particle.scale.y = 1; scene.add( particle ); particles.push(particle); }进行雪花位置优化for(var i = 0; i < particles.length; i++) { var particle = particles[i]; particle.updatePhysics(); with(particle.position) { if(y < -1000) y += 2000; if(x > 1000) x -= 2000; else if(x <- 1000) x += 2000; if(z > 1000) z -= 2000; else if(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(scene.position); renderer.render( scene, camera );4:雪花的自由下落这里是利用了gravity重力，让他下落的，我们也可以通过改变它的大小来改变速度。Particle3D = function(material){ THREE.Particle.call(this,material); this.velocity = new THREE.Vector3(0,-8,0); this.velocity.rotateX(randomRange(-45,45)); this.velocity.rotateY(randomRange(0,360)); this.gravity = new THREE.Vector3(0,0,0); this.drag=1;};Particle3D.prototype = new THREE.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 * Math.PI/180); sinRY = Math.sin(angle * Math.PI/180); var tempz = this.z;; var tempx = this.x; this.x = (tempx * cosRY) + (tempz * sinRY); this.z = (tempx * -sinRY) + (tempz * cosRY);}活动页活动页效果就不细细说了，我就把雪花效果添加进去活动页。使用pointer-events:none,表示它将捕获不到任何点击，而只是让事件穿透到它的下面。 .snow { position: fixed; top: 0; left: 0; z-index: 10000; transform: translate3d(0, 0, 0); width: 100%; height: 100%; pointer-events: none; }其他这个活动页还有一个问题，就是按住屏幕（往下轻滑），雪就卡住了一小会希望有大佬来帮我解决这个问题。鄙人不胜感激。总结作为一个即将毕业的大四学生，这是我来公司实习做的第一个活动页，希望可以帮助大家，互相学习，一起进步。当然也有一些不足之处，请大家多多指教。如果大家有什么好的想法的话可以联系我的qq:137032979.码字不容易，希望大家点个赞。前端路漫漫，与君共勉之。