3D炫酷雪花背景的實現

阿新 • • 發佈：2019-01-17

效果展示（微信截動態變化背景圖，效果不太好。另外，由於不會P圖，雪花用的圖片就是一個白色的圓，特別是近鏡頭的時候，效果有點搓哈，囧囧囧~，會p圖的同學可以將ParticleSmoke.png P成無背景的雪花圖片，要是能把P好的圖片給我的話就太謝謝了！）：

程式碼講解：

index.html

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">

<meta name="viewport" content="width=device-width,hight=device-hight,minimum-scale=1.0,maximum-scale=1.0,ser-scalable=none">
<title>開始下雪了</title>
<link type="text/css" rel="stylesheet" href="">

<style>
*{margin: 0;padding: 0;overflow: hidden;}
body{
	background-image:url('images/background.jpg');
	background-size:cover;
	background-repeat: no-repeat;
	position: relative;
	width:100%;
}

</style>
</head>

<body>
<audio autoplay="autoplay" loop="loop"><source src="js/網路歌手-冰海.mp3" type="audio/ogg"></audio>
</body>
<script type="text/javascript" src="./js/ThreeCanvas.js"></script>
<script src="http://www.jq22.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/Snow.js"></script>
<script type="text/javascript" src="./js/snowFall.js"></script>
<script type="text/javascript" src="./js/snowFalling.js"></script>
<script>
	$.snowFalling({
		//初始雪花粒子數量，密度
		particleNo:0,
		//粒子下拉速度
		particleSpeed:50,
		//粒子在垂直（Y軸）方向運動範圍
		particleY_Range:window.innerWidth,
		//粒子在垂直（X軸）方向運動範圍
		particleX_Range:window.innerHeight,
	    //相機離Z軸原點距離
	    zIndex:600,
	  //攝像機視野角度
	    angle:55,
	    wind_weight:10 //風速：大於0，雪花向右飄；小於0，雪花向左飄；等於0，無風。
		});
</script>


</html>

index.html除了設定下雪的引數，加個背景音樂外，沒有其他的了。

snowFalling.js

 //建立snowFall物件
var snowFall=new snowFall(window.innerWidth,window.innerHeight,true,20);
//容器
var container;

//繫結jquery方法
jQuery.extend({
	snowFalling:function(options){
		 var defaults = {     
			//建立粒子數量，密度
			particleNo: 500,
			//粒子下拉速度
			particleSpeed:15,
			//粒子在垂直（Y軸）方向運動範圍
			particleY_Range:1300,
			//粒子在垂直（X軸）方向運動範圍
			particleX_Range:1000,
		    //相機離Z軸原點距離
		    zIndex:600,
		    //風力強度，正值向右，負值向左
		    wind_weight:0,
		    //攝像機視野角度
		    angle:55
		  };  
		  
		var particleImage = new Image();
		particleImage.src = "images/ParticleSmoke.png";
		var opts = $.extend(defaults, options);
		opts.particleImage=particleImage;
		opts.screenWidth=window.innerWidth;
		opts.screenHeight=window.innerHeight;
		//初始化下雪廠景
		snowFall.init(opts);
		
		container = document.createElement('div');
		document.body.appendChild(container);
		container.appendChild(snowFall.renderer.domElement );
		
		//雪景變化
		snowFall.snowFallChange();
	}
});

snowFalling.js主要做了三件事：1、獲取index.html中設定的引數；2、new 一個snowFall物件，並進行初始化；3、呼叫snowFall.snowFallChange()函式；

snowFall.js

function snowFall(screenWidth,screenHeight,flag,parameter){
	this.screenWidth=screenWidth;
	this.screenHeight=screenHeight;
	this.flag=flag;
	this.parameter=parameter;
}
snowFall.prototype.init=function(opts){
		snowFall.options=opts;
//		透視相機，物體大小隨距離攝像機遠近改變，對比投影相機
//		相機的上方向為Y軸，右方向為X軸，沿著Z軸垂直朝裡（視野角：fov； 縱橫比：aspect； 相機離視最近的距離：near； 相機離視體積最遠距離：far）		
		snowFall.camera = new THREE.PerspectiveCamera( opts.angle, snowFall.screenWidth / snowFall.screenHeight, 1, 10000 );
		//設定攝像機z座標位置距離原點向外距離
		snowFall.camera.position.z = snowFall.options.zIndex;
		//建立場景
		snowFall.scene = new THREE.Scene();
		snowFall.scene.add(snowFall.camera);
		//建立渲染器
		snowFall.renderer = new THREE.CanvasRenderer();
		snowFall.renderer.setSize(snowFall.screenWidth, snowFall.screenHeight);
		//建立材料
		snowFall.material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(snowFall.options.particleImage) } );
		
		snowFall.particles = []; 
		
		for (var i = 0; i < snowFall.options.particleNo; i++) {
			snowFall.addparticle(); 
		}
}
snowFall.prototype.loop=function(){
	for(var i = 0; i<snowFall.particles.length; i++){
		snowFall.particle = snowFall.particles[i]; 
		snowFall.particle.updatePhysics(); 
		with(snowFall.particle.position){
			if(y<-snowFall.options.particleY_Range/2){
				y+=snowFall.options.particleY_Range;
			} 
//			Z軸位置不變
			if(x>snowFall.options.screenWidth/2){
				x-=snowFall.options.screenWidth;
			}else if(x<-snowFall.options.screenWidth/2){
				x+=snowFall.options.screenWidth;
			} 
			//風力偏向效果
			x+=snowFall.options.wind_weight;
		}				
	}
	snowFall.camera.lookAt(snowFall.scene.position); 
	snowFall.renderer.render( snowFall.scene, snowFall.camera );
}

snowFall.prototype.addParticle=function(){
	snowFall.particle = new Snow(snowFall.material);
	snowFall.particle.position.x = Math.random() * snowFall.options.screenWidth *2- snowFall.options.screenWidth/2;
	snowFall.particle.position.y = Math.random() * snowFall.options.screenHeight * 2 - snowFall.options.screenHeight;
	snowFall.particle.position.z = Math.random() * snowFall.options.zIndex * 2 - snowFall.options.zIndex*1;
	snowFall.particle.scale.x = snowFall.particle.scale.y =  1;
	snowFall.scene.add( snowFall.particle );		
	snowFall.particles.push(snowFall.particle); 
}

snowFall.prototype.removeParticle=function(){
	snowFall.particle=snowFall.particles.pop();
	snowFall.scene.remove( snowFall.particle ); 
}

snowFall.prototype.parameterChange=function(){
	if(snowFall.particles.length>=500){
		snowFall.parameter=500;
	}else if(snowFall.particles.length>=200&&snowFall.particles.length<500){
		snowFall.parameter=300;
	}else if(snowFall.particles.length>=100&&snowFall.particles.length<200){
		snowFall.parameter=100;
	}else if(snowFall.particles.length>=50&&snowFall.particles.length<100){
		snowFall.parameter=50;
	}else{
		snowFall.parameter=20;
	}
}

snowFall.prototype.particlesCountChange=function(){
	snowFall.parameterChange(snowFall.particles);
	if(snowFall.flag){
		for(var j=0;j<parseInt(snowFall.parameter*Math.random());j++){
			if(snowFall.particles.length>=1500){
				snowFall.flag=false;
				return snowFall.flag;
			}
			snowFall.addParticle();
		}
	}else{
		for(var j=0;j<parseInt(snowFall.parameter*Math.random());j++){
			if(snowFall.particles.length>0){
				snowFall.removeParticle();
			}else{
				snowFall.flag=true;
			}
		}
	}
}

snowFall.prototype.snowFallChange=function(){
	var time1=setInterval( snowFall.loop, snowFall.options.particleSpeed );
		setInterval(function(){
			snowFall.options.particleNo+=parseInt(10*Math.random());
			window.clearInterval(time1); 
			snowFall.particlesCountChange();
			time1=setInterval( snowFall.loop, snowFall.options.particleSpeed);
		},3000);
}

snowFall.js主要是已Prototype/Constructor雜合方式建立了一個snowFall類。

function snowFall() 建構函式；

snowFall.init() 初始化，主要實現包括三維相機、場景、渲染器、材料的初始化，以及開始雪花粒子數量的設定；

snowFall.snowFallChange() 雪景的變化，包括雪花粒子數量的變化以及雪花移動位置的動態變化；

snowFall.particlesCountChange() 雪花粒子數量的變化，雪花粒子數量一開始是預設增加，當達到1500的時候，雪花粒子數量就會減小；雪花粒子每次迴圈增加/減小的數量是隨機的，但增加/減少的雪花粒子速

率和當前雪花粒子數量正相關。

snowFall.loop() 雪花粒子位置的變化；

snowFall.parameterChange() 雪花粒子增加/減少速度變化；

snowFall.addParticle() 增加雪花粒子；

snowFall.removeParticle() 移除雪花粒子；

Snow.js

Snow=function(material){
	THREE.Particle.call(this,material);
	this.velocity=new THREE.Vector3(0,-8,0);//速度;
	//this.velocity.rotateX(2);//旋轉;
	this.gravity=new THREE.Vector3(0,0,0);//加速度;
	this.drag=1;//速度相乘係數;
};
//Particle:粒子;
//prototype:原形;
Snow.prototype=new THREE.Particle();
Snow.prototype.constructor=Snow;//建構函式
Snow.prototype.updatePhysics=function(){
	this.velocity.multiplyScalar(this.drag);//向量相乘函式
	this.velocity.addSelf(this.gravity);//向量相加函式
	this.position.addSelf(this.velocity);//向量相加函式
}
var TO_RADIANS=Math.PI/180;//角度向弧度轉換系數*
THREE.Vector3.prototype.rotateY=function(angle){
	//繞Y軸順時針旋轉angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempz=this.z;
	var tempx=this.x;
	this.x=(tempx*cosRY)+(tempz*sinRY);
	this.z=(tempx*-sinRY)+(tempz*cosRY);
}
THREE.Vector3.prototype.rotateX=function(angle){
	//繞X軸順時針旋轉angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempz=this.z;;
	var tempy=this.y;
	this.y=(tempy*cosRY)+(tempz*sinRY);
	this.z=(tempy*-sinRY)+(tempz*cosRY);
}
THREE.Vector3.prototype.rotateZ=function(angle){
	//繞Z軸順時針旋轉angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempx=this.x;;
	var tempy=this.y;
	this.y=(tempy*cosRY)+(tempx*sinRY);
	this.x=(tempy*-sinRY)+(tempx*cosRY);
}

snow.js 主要是對ThreeCanvas.js的應用，想學的可以去了解一下three.js和ThreeCanvas.js

3D炫酷雪花背景的實現

3D炫酷雪花背景的實現

@description iPhoneX炫彩漸變背景實現

炫酷 CSS 背景效果的 10 個代碼片段

酷炫字體背景圖的實現——神奇的background-clip: text

WebGIS簡單實現一個區域炫酷的3D立體地圖效果

Android之——史上最簡單最酷炫的3D圖片瀏覽效果的實現

學習 CSS 之用 CSS 3D 實現炫酷效果

canvas - 炫酷的3D星空

C語言實現粒子運動效果，最美C語言！最炫酷C語言！

純CSS程式碼實現翻轉選單的炫酷效果

CSS3 實現圖片倒影炫酷特效

python的簡潔程式碼，實現炫酷的座標圖！

如何製作炫酷的PCB板3D效果圖

css hover背景炫酷點綴

mix-blend-mode及background-blend-mode實現炫酷的圖片樣式

仿製慕課網app實現鬥魚，全民k歌視訊引導頁（ViewVideoViewPaper）炫酷效果

css3實現ps蒙版效果以及動畫，炫酷吊炸天！

純CSS酷炫導航欄的實現

炫酷生動的迴圈視訊背景網頁設計實戰

android實現炫酷水波紋介面

3D炫酷雪花背景的實現

相關推薦