記一次雪花效果

數碼相機 · 發表 2019-01-22 13:48:55

摘要：前言最近，公司UI小姐姐告訴我能不能做一個關於雪花的效果圖，最好是能體現雪花的遠近感（遠的時候比較小近的時候雪花比較大），我尋思良久，一開始用canvas做了一個雪花效果感覺不是很滿意，然後就該用了three.js做了一個關於雪花的效果。效果還行給大家先看一下效果。 ...

前言

最近，公司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.碼字不容易，希望大家點個贊。前端路漫漫，與君共勉之。