演示地址: http://creativejs.com/uploads/tutorials/three/Part1_particles/ThreeParticles.html
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>
聲明全局變量
//定義應用所需的組件:相機,場景,渲染器
var camera, scene, renderer;
//跟蹤鼠標的位置
var mouseX = 0, mouseY = 0;
//定義存儲粒子的數組
var particles = [];
相機:
OpenGL（WebGL）中、三維空間中的物體投影到二維空間的方式中，存在透視投影和正投影兩種相機。
透視投影就是、從視點開始越近的物體越大、遠處的物體繪制的較小的一種方式、和日常生活中我們看物體的方式是一致的。
正投影就是不管物體和視點距離，都按照統一的大小進行繪制、在建築和設計等領域需要從各個角度來繪制物體，因此這種投影被廣泛應用。
在 Three.js 也能夠指定透視投影和正投影兩種方式的相機。
場景:
場景就是一個三維空間。 用 [Scene] 類聲明一個叫 [scene] 的對象。
渲染器:
三維空間里的物體映射到二維平面的過程被稱為三維渲染。 一般來說我們都把進行渲染的操作叫做渲染器。
數據初始化
//數據初始化 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); }
相機初始化說明:
實例中使用的是透視投影. var camera = new THREE.PerspectiveCamera( fov , aspect , near , far );
透視投影中，會把稱為視體積領域中的物體作成投影圖。 視體積是通過以下4個參數來指定。
視野角：fov
縱橫比：aspect
相機離視體積最近的距離：near
相機離視體積最遠的距離：far
設置相機的位置:
相機的位置坐標和視野的中心坐標，按照
//設置相機的位置坐標
camera.position.x = 100;
camera.position.y = 20;
camera.position.z = 50;
方式進行設置。 和該方式一樣，下面這樣的方法也可以
camera.position.set(100,20,50);
此外還可以設置相機的上方向,視野中心等,
設置相機的上方向為正方向:
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
設置相機的視野中心
利用[lookAt]方法來設置相機的視野中心。 「lookAt()」的參數是一個屬性包含中心坐標「x」「y」「z」的對象。
「lookAt()」方法不僅是用來設置視點的中心坐標、 在此之前設置的相機屬性要發生實際作用，也需要調用 [lookAt] 方法。
其他投影方式
在 Three.js 中、有各種各樣的類，用來來實現透視投影、正投影或者復合投影（透視投影和正投影）這樣的相機。
var camera = THREE.OrthographicCamera = function ( left, right, top, bottom, near, far ) //正投影 var camera = THREE.CombinedCamera = function ( width, height, fov, near, far, orthonear, orthofar ) //複合投影
渲染器
創建CanvasRenderer對象.這是一個普通的2D畫布對象,實例中我們添加到body標簽中. 否則我們就不會看到它。我們想讓它充滿整個瀏覽器窗口，所以我們設置其大小為window.innerwidth和window.innerheight。
鼠標監聽
使用自定義函數makeParticles()創建粒子,並為其添加mousemove偵聽器來跟蹤鼠標的位置,最后我們建立一個間隔調用update函數一秒30次。
update函數中的定義如下:
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; 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); } }
math . random()返回一個浮點數在0和1之間,我們乘以1000,給了我們一個0到1000之間的數字。然后我們減去500,這給了我們一個號碼在-500和500之間.我們也可以這樣定義一個生成范圍區間內隨機值的函數
function randomRange(min, max) { return Math.random()*(max-min) + min; }
繪制粒子的函數
//定義粒子繪制函數 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(); }
定義粒子移動的函數,這里設置成移動速度隨着鼠標距離Y軸0點的值越大,粒子移動越快,
//移動粒子的函數 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; }
至此,空間粒子簡單效果學習完畢.
整合代碼如下:
<!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>
參考資料: http://creativejs.com/tutorials/three-js-part-1-make-a-star-field/
轉載請注明出處:[http://www.cnblogs.com/dennisit/archive/2013/04/20/3032837.html]
