前言

最近，公司UI小姐姐告诉我能不能做一个关于雪花的效果图，最好是能体现雪花的远近感（远的时候比较小近的时候雪花比较大），我寻思良久，一开始用canvas做了一个雪花效果感觉不是很满意，然后就该用了three.js做了一个关于雪花的效果。效果还行给大家先看一下效果。

附上地址

在线预览：雪花活动页

GitHub地址：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;

}

## 其他

这个活动页还有一个问题，就是按住屏幕（往下轻滑），雪就卡住了一小会希望有大佬来帮我解决这个问题。鄙人不胜感激。