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

更新時間：2020年09月13日 14:19:01 作者：蘇若年

這篇文章主要為大家詳細(xì)介紹了使用3D引擎threeJS實現(xiàn)星空粒子移動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>Three.js實現(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)用所需的組件:相機,場景,渲染器
 var camera, scene, renderer;
 //跟蹤鼠標(biāo)的位置
 var mouseX = 0, mouseY = 0;
 //定義存儲粒子的數(shù)組
 var particles = [];

相機:

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

場景:

場景就是一個三維空間。用 [Scene] 類聲明一個叫 [scene] 的對象。

渲染器:
三維空間里的物體映射到二維平面的過程被稱為三維渲染。一般來說我們都把進行渲染的操作叫做渲染器。

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

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

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

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

相機初始化說明:

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

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

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

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

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

此外還可以設(shè)置相機的上方向,視野中心等,
設(shè)置相機的上方向為正方向:　

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

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

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

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

其他投影方式

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

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對象.這是一個普通的2D畫布對象,實例中我們添加到body標(biāo)簽中. 否則我們就不會看到它。我們想讓它充滿整個瀏覽器窗口，所以我們設(shè)置其大小為window.innerwidth和window.innerheight。

鼠標(biāo)監(jiān)聽

使用自定義函數(shù)makeParticles()創(chuàng)建粒子,并為其添加mousemove偵聽器來跟蹤鼠標(biāo)的位置,最后我們建立一個間隔調(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)生的粒子添加到場景,否則我們將不會看到它
 scene.add(particle);
 //將粒子位置的值保存到數(shù)組
 particles.push(particle);
 }
 }

math . random()返回一個浮點數(shù)在0和1之間,我們乘以1000,給了我們一個0到1000之間的數(shù)字。然后我們減去500,這給了我們一個號碼在-500和500之間.我們也可以這樣定義一個生成范圍區(qū)間內(nèi)隨機值的函數(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();
 }

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

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

鼠標(biāo)移動時函數(shù)監(jiān)聽

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

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

整合代碼如下:

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>Three.js實現(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)用所需的組件:相機,場景,渲染器
 var camera, scene, renderer;
 //跟蹤鼠標(biāo)的位置
 var mouseX = 0, mouseY = 0;
 //定義存儲粒子的數(shù)組
 var particles = [];
 
 //數(shù)據(jù)初始化
 function init(){
 //相機參數(shù)：
 //四個參數(shù)值分別代表:視野角：fov 縱橫比：aspect 相機離視體最近的距離：near 相機離視體最遠(yuǎn)的距離：far
 camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 1, 4000 );
 //設(shè)置相機位置,默認(rèn)位置為:0,0,0. 
 camera.position.z = 1000;

 //聲明場景
 scene = new THREE.Scene();
 //將相機裝加載到場景
 scene.add(camera);
 
 //生成渲染器的對象
 renderer = new THREE.CanvasRenderer();
 //設(shè)置渲染器的大小
 renderer.setSize( window.innerWidth, window.innerHeight );
 //追加元素
 document.body.appendChild(renderer.domElement);
 //調(diào)用自定義的生成粒子的方法
 makeParticles();
 //添加鼠標(biāo)移動監(jiān)聽
 document.addEventListener('mousemove',onMouseMove,false);
 //設(shè)置間隔調(diào)用update函數(shù),間隔次數(shù)為每秒30次
 setInterval(update,1000/30);
 }
 
 function update() {
 //調(diào)用移動粒子的函數(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()返回一個浮點數(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)生的粒子添加到場景
  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();
 }

 
 //移動粒子的函數(shù)
 function updateParticles(){
 
 //遍歷每個粒子
 for(var i=0; i<particles.length; i++){
  particle = particles[i];
  //設(shè)置粒子向前移動的速度依賴于鼠標(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)移動時調(diào)用
 function onMouseMove(event){
 mouseX = event.clientX;
 mouseY = event.clientY;
 }
 </script>
 </head>
 <body onload="init()">
 </body>
</html>

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

您可能感興趣的文章: