欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用3D引擎threeJS實(shí)現(xiàn)星空粒子移動(dòng)效果

 更新時(shí)間：2020年09月13日 14:19:01   作者：蘇若年  
這篇文章主要為大家詳細(xì)介紹了使用3D引擎threeJS實(shí)現(xiàn)星空粒子移動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

three.js是JavaScript編寫(xiě)的WebGL第三方庫(kù)。提供了非常多的3D顯示功能。Three.js 是一款運(yùn)行在瀏覽器中的 3D 引擎，你可以用它創(chuàng)建各種三維場(chǎng)景，包括了攝影機(jī)、光影、材質(zhì)等各種對(duì)象。

下載地址: http://threejs.org/

首先創(chuàng)建一個(gè)HTML文件,引入three.js引擎包.

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>Three.js實(shí)現(xiàn)3D空間粒子效果</title>
 <style type="text/css">
 body{
 background-color:#000000;
 margin:0px;
 overflow:hidden;
 }
 </style>
 <script src="scripts/three.js"></script>
 </head>
 <body >
 </body>
</html>

聲明全局變量

//定義應(yīng)用所需的組件:相機(jī),場(chǎng)景,渲染器
 var camera, scene, renderer;
 //跟蹤鼠標(biāo)的位置
 var mouseX = 0, mouseY = 0;
 //定義存儲(chǔ)粒子的數(shù)組
 var particles = [];

相機(jī):

OpenGL（WebGL）中、三維空間中的物體投影到二維空間的方式中，存在透視投影和正投影兩種相機(jī)。
透視投影就是、從視點(diǎn)開(kāi)始越近的物體越大、遠(yuǎn)處的物體繪制的較小的一種方式、和日常生活中我們看物體的方式是一致的。
正投影就是不管物體和視點(diǎn)距離，都按照統(tǒng)一的大小進(jìn)行繪制、在建筑和設(shè)計(jì)等領(lǐng)域需要從各個(gè)角度來(lái)繪制物體，因此這種投影被廣泛應(yīng)用。
在 Three.js 也能夠指定透視投影和正投影兩種方式的相機(jī)。

場(chǎng)景:

場(chǎng)景就是一個(gè)三維空間。 用 [Scene] 類(lèi)聲明一個(gè)叫 [scene] 的對(duì)象。

渲染器:
三維空間里的物體映射到二維平面的過(guò)程被稱為三維渲染。 一般來(lái)說(shuō)我們都把進(jìn)行渲染的操作叫做渲染器。

數(shù)據(jù)初始化

//數(shù)據(jù)初始化
 function init(){
 //相機(jī)參數(shù)：
 //四個(gè)參數(shù)值分別代表:視野角：fov 縱橫比：aspect 相機(jī)離視體最近的距離：near 相機(jī)離視體最遠(yuǎn)的距離：far
 camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
 //設(shè)置相機(jī)位置,默認(rèn)位置為:0,0,0. 
 camera.position.z = 1000;

 //聲明場(chǎng)景
 scene = new THREE.Scene();
 //將相機(jī)裝加載到場(chǎng)景
 scene.add(camera);

 //生成渲染器的對(duì)象
 renderer = new THREE.CanvasRenderer();
 //設(shè)置渲染器的大小
 renderer.setSize( window.innerWidth, window.innerHeight );
 //追加元素
 document.body.appendChild(renderer.domElement);
 //調(diào)用自定義的生成粒子的方法
 makeParticles();
 //添加鼠標(biāo)移動(dòng)監(jiān)聽(tīng)
 document.addEventListener('mousemove',onMouseMove,false);
 //設(shè)置間隔調(diào)用update函數(shù),間隔次數(shù)為每秒30次
 setInterval(update,1000/30);
 }

相機(jī)初始化說(shuō)明:

實(shí)例中使用的是透視投影. var camera = new THREE.PerspectiveCamera( fov , aspect , near , far );
　　透視投影中，會(huì)把稱為視體積領(lǐng)域中的物體作成投影圖。 視體積是通過(guò)以下4個(gè)參數(shù)來(lái)指定。
　　視野角：fov
　　縱橫比：aspect
　　相機(jī)離視體積最近的距離：near
　　相機(jī)離視體積最遠(yuǎn)的距離：far

設(shè)置相機(jī)的位置:

相機(jī)的位置坐標(biāo)和視野的中心坐標(biāo)，按照

　//設(shè)置相機(jī)的位置坐標(biāo)
　　　　camera.position.x = 100;
　　　　camera.position.y = 20;
　　　　camera.position.z = 50;

方式進(jìn)行設(shè)置。 和該方式一樣，下面這樣的方法也可以
　camera.position.set(100,20,50);

此外還可以設(shè)置相機(jī)的上方向,視野中心等,
設(shè)置相機(jī)的上方向?yàn)檎较?　

camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;

設(shè)置相機(jī)的視野中心 

利用[lookAt]方法來(lái)設(shè)置相機(jī)的視野中心。 「lookAt()」的參數(shù)是一個(gè)屬性包含中心坐標(biāo)「x」「y」「z」的對(duì)象。 　 

「lookAt()」方法不僅是用來(lái)設(shè)置視點(diǎn)的中心坐標(biāo)、 在此之前設(shè)置的相機(jī)屬性要發(fā)生實(shí)際作用，也需要調(diào)用 [lookAt] 方法。

其他投影方式

在 Three.js 中、有各種各樣的類(lèi)，用來(lái)來(lái)實(shí)現(xiàn)透視投影、正投影或者復(fù)合投影（透視投影和正投影）這樣的相機(jī)。

var camera = THREE.OrthographicCamera = function ( left, right, top, bottom, near, far ) //正投影
var camera = THREE.CombinedCamera = function ( width, height, fov, near, far, orthonear, orthofar ) //複合投影

渲染器

創(chuàng)建CanvasRenderer對(duì)象.這是一個(gè)普通的2D畫(huà)布對(duì)象,實(shí)例中我們添加到body標(biāo)簽中. 否則我們就不會(huì)看到它。我們想讓它充滿整個(gè)瀏覽器窗口，所以我們?cè)O(shè)置其大小為window.innerwidth和window.innerheight。

鼠標(biāo)監(jiān)聽(tīng)

使用自定義函數(shù)makeParticles()創(chuàng)建粒子,并為其添加mousemove偵聽(tīng)器來(lái)跟蹤鼠標(biāo)的位置,最后我們建立一個(gè)間隔調(diào)用update函數(shù)一秒30次。
update函數(shù)中的定義如下:

function update() {
 updateParticles();
 renderer.render( scene, camera );
 }

產(chǎn)生粒子的函數(shù)

//定義粒子生成的方法
 function makeParticles(){
 
 var particle,material;
 //粒子從Z軸產(chǎn)生區(qū)間在-1000到1000
 for(var zpos=-1000;zpos<1000;zpos+=20){
 //we make a particle material and pass through the colour and custom particle render function we defined. 
 material = new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: particleRender } );
 //生成粒子
 particle = new THREE.Particle(material);
 //隨即產(chǎn)生x軸,y軸,區(qū)間值為-500-500
 particle.position.x = Math.random()*1000-500;
 particle.position.y = Math.random()*1000-500;
 //設(shè)置z軸
 particle.position.z = zpos;
 //scale it up a bit
 particle.scale.x = particle.scale.y = 10;
 //將產(chǎn)生的粒子添加到場(chǎng)景,否則我們將不會(huì)看到它
 scene.add(particle);
 //將粒子位置的值保存到數(shù)組
 particles.push(particle);
 }
 }

math . random()返回一個(gè)浮點(diǎn)數(shù)在0和1之間,我們乘以1000,給了我們一個(gè)0到1000之間的數(shù)字。然后我們減去500,這給了我們一個(gè)號(hào)碼在-500和500之間.我們也可以這樣定義一個(gè)生成范圍區(qū)間內(nèi)隨機(jī)值的函數(shù)

function randomRange(min, max) { 
 return Math.random()*(max-min) + min; 
}

繪制粒子的函數(shù)

 //定義粒子繪制函數(shù)
 function particleRender( context ) {
 //獲取canvas上下文的引用
 context.beginPath();
 // and we just have to draw our shape at 0,0 - in this
 // case an arc from 0 to 2Pi radians or 360º - a full circle!
 context.arc( 0, 0, 1, 0, Math.PI * 2, true );
 //設(shè)置原型填充
 context.fill();
 }

定義粒子移動(dòng)的函數(shù),這里設(shè)置成移動(dòng)速度隨著鼠標(biāo)距離Y軸0點(diǎn)的值越大,粒子移動(dòng)越快

 //移動(dòng)粒子的函數(shù)
 function updateParticles(){
 
 //遍歷每個(gè)粒子
 for(var i=0; i<particles.length; i++){
 particle = particles[i];
 //設(shè)置粒子向前移動(dòng)的速度依賴于鼠標(biāo)在平面Y軸上的距離
 particle.position.z += mouseY * 0.1;
 //如果粒子Z軸位置到1000,將z軸位置設(shè)置到-1000,即移動(dòng)到原點(diǎn),這樣就會(huì)出現(xiàn)無(wú)窮盡的星域效果.
 if(particle.position.z>1000){
  particle.position.z-=2000; 
 }
 }
 }

鼠標(biāo)移動(dòng)時(shí)函數(shù)監(jiān)聽(tīng)

 //鼠標(biāo)移動(dòng)時(shí)調(diào)用
 function onMouseMove(event){
 mouseX = event.clientX;
 mouseY = event.clientY;
 }

至此,空間粒子簡(jiǎn)單效果學(xué)習(xí)完畢.

整合代碼如下:

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>Three.js實(shí)現(xiàn)3D空間粒子效果</title>
 <style type="text/css">
 body{
 background-color:#000000;
 margin:0px;
 overflow:hidden;
 }
 </style>
 <script src="scripts/three.js"></script>
 <script>
 //定義應(yīng)用所需的組件:相機(jī),場(chǎng)景,渲染器
 var camera, scene, renderer;
 //跟蹤鼠標(biāo)的位置
 var mouseX = 0, mouseY = 0;
 //定義存儲(chǔ)粒子的數(shù)組
 var particles = [];
 
 //數(shù)據(jù)初始化
 function init(){
 //相機(jī)參數(shù)：
 //四個(gè)參數(shù)值分別代表:視野角：fov 縱橫比：aspect 相機(jī)離視體最近的距離：near 相機(jī)離視體最遠(yuǎn)的距離：far
 camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
 //設(shè)置相機(jī)位置,默認(rèn)位置為:0,0,0. 
 camera.position.z = 1000;

 //聲明場(chǎng)景
 scene = new THREE.Scene();
 //將相機(jī)裝加載到場(chǎng)景
 scene.add(camera);
 
 //生成渲染器的對(duì)象
 renderer = new THREE.CanvasRenderer();
 //設(shè)置渲染器的大小
 renderer.setSize( window.innerWidth, window.innerHeight );
 //追加元素
 document.body.appendChild(renderer.domElement);
 //調(diào)用自定義的生成粒子的方法
 makeParticles();
 //添加鼠標(biāo)移動(dòng)監(jiān)聽(tīng)
 document.addEventListener('mousemove',onMouseMove,false);
 //設(shè)置間隔調(diào)用update函數(shù),間隔次數(shù)為每秒30次
 setInterval(update,1000/30);
 }
 
 function update() {
 //調(diào)用移動(dòng)粒子的函數(shù)
 updateParticles();
 //重新渲染
 renderer.render( scene, camera );
 }

 //定義粒子生成的方法
 function makeParticles(){
 
 var particle,material;
 //粒子從Z軸產(chǎn)生區(qū)間在-1000到1000
 for(var zpos=-1000;zpos<1000;zpos+=20){
  //we make a particle material and pass through the colour and custom particle render function we defined. 
  material = new THREE.ParticleCanvasMaterial( { color: 0xffffff, program: particleRender } );
  //生成粒子
  particle = new THREE.Particle(material);
  //隨即產(chǎn)生x軸,y軸,區(qū)間值為-500-500
  particle.position.x = Math.random()*1000-500; //math . random()返回一個(gè)浮點(diǎn)數(shù)在0和1之間
  particle.position.y = Math.random()*1000-500;
  //設(shè)置z軸
  particle.position.z = zpos;
  //scale it up a bit
  particle.scale.x = particle.scale.y = 10;
  //將產(chǎn)生的粒子添加到場(chǎng)景
  scene.add(particle);
  //將粒子位置的值保存到數(shù)組
  particles.push(particle);
 }
 }

 //定義粒子渲染器
 function particleRender( context ) {
 //獲取canvas上下文的引用
 context.beginPath();
 // and we just have to draw our shape at 0,0 - in this
 // case an arc from 0 to 2Pi radians or 360º - a full circle!
 context.arc( 0, 0, 1, 0, Math.PI * 2, true );
 //設(shè)置原型填充
 context.fill();
 }

 
 //移動(dòng)粒子的函數(shù)
 function updateParticles(){
 
 //遍歷每個(gè)粒子
 for(var i=0; i<particles.length; i++){
  particle = particles[i];
  //設(shè)置粒子向前移動(dòng)的速度依賴于鼠標(biāo)在平面Y軸上的距離
  particle.position.z += mouseY * 0.1;
  //如果粒子Z軸位置到1000,將z軸位置設(shè)置到-1000
  if(particle.position.z>1000){
  particle.position.z-=2000; 
  }
 }
 }
 
 //鼠標(biāo)移動(dòng)時(shí)調(diào)用
 function onMouseMove(event){
 mouseX = event.clientX;
 mouseY = event.clientY;
 }
 </script>
 </head>
 <body onload="init()">
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論