共计 2582 个字符，预计需要花费 7 分钟才能阅读完成。
前言
最近，公司 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. 码字不容易，希望大家点个赞。前端路漫漫，与君共勉之。
