點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

threeJS實現星空粒子移動效果實例分享

來源：懂視網責編：小采時間：2020-11-27 20:05:36

threeJS實現星空粒子移動效果實例分享

threeJS實現星空粒子移動效果實例分享:本文主要為和家詳細介紹了使用3D引擎threeJS實現星空粒子移動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。Three.js 是一款運行在瀏覽器中的 3D

推薦度：

點擊下載本文 文檔為doc格式

導讀threeJS實現星空粒子移動效果實例分享:本文主要為和家詳細介紹了使用3D引擎threeJS實現星空粒子移動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。Three.js 是一款運行在瀏覽器中的 3D

本文主要為和家詳細介紹了使用3D引擎threeJS實現星空粒子移動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能幫助到大家。

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

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

首先創建一個HTML文件,引入three.js引擎包.

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>Three.js實現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>

聲明全局變量

相機:

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

場景:

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

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

數據初始化

相機初始化說明:

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

　　設置相機的位置:

　　相機的位置坐標和視野的中心坐標，按

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

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

設置相機的視野中心

　　利用[lookAt]方法來設置相機的視野中心。「lookAt()」的參數是一個屬性包含中心坐標「x」「y」「z」的對象。
　「lookAt()」方法不僅是用來設置視點的中心坐標、在此之前設置的相機屬性要發生實際作用，也需要調用 [lookAt] 方法。

其他投影方式

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

渲染器

創建CanvasRenderer對象.這是一個普通的2D畫布對象,實例中我們添加到body標簽中. 否則我們就不會看到它。我們想讓它充滿整個瀏覽器窗口，所以我們設置其大小為window.innerwidth和window.innerheight。

鼠標監聽

使用自定義函數makeParticles()創建粒子,并為其添加mousemove偵聽器來跟蹤鼠標的位置,最后我們建立一個間隔調用update函數一秒30次。
update函數中的定義如下:

產生粒子的函數

math . random()返回一個浮點數在0和1之間,我們乘以1000,給了我們一個0到1000之間的數字。然后我們減去500,這給了我們一個號碼在-500和500之間.我們也可以這樣定義一個生成范圍區間內隨機值的函數

繪制粒子的函數

定義粒子移動的函數,這里設置成移動速度隨著鼠標距離Y軸0點的值越大,粒子移動越快,

鼠標移動時函數監聽

至此,空間粒子簡單效果學習完畢.

整合代碼如下:

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

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

 //定義粒子生成的方法
 function makeParticles(){
 
 var particle,material;
 //粒子從Z軸產生區間在-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);
 //隨即產生x軸,y軸,區間值為-500-500
 particle.position.x = Math.random()*1000-500; //math . random()返回一個浮點數在0和1之間
 particle.position.y = Math.random()*1000-500;
 //設置z軸
 particle.position.z = zpos;
 //scale it up a bit
 particle.scale.x = particle.scale.y = 10;
 //將產生的粒子添加到場景
 scene.add(particle);
 //將粒子位置的值保存到數組
 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 );
 //設置原型填充
 context.fill();
 }

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

threeJS實現星空粒子移動效果實例分享

推薦度：

點擊下載本文 文檔為doc格式

標簽：移動 js 示例

熱門焦點

国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

threeJS實現星空粒子移動效果實例分享

threeJS實現星空粒子移動效果實例分享

threeJS實現星空粒子移動效果實例分享

最新推薦

猜你喜歡

熱門推薦