THREE.JS入門教學(4)建立粒子系統_基礎知識

譯序
Three.js是一個很棒的開源WebGL函式庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現真正意義的3D。但目前這項技術還在發展階段，資料極為匱乏，愛好者學習基本上要透過Demo源碼和Three.js本身的源碼來學習。
0.簡介
嗨，又見面了。這麼說我們已經開始學習Three.js了，如果你還沒看過之前三篇教程，建議你先讀完。如果你已經讀完前面的教學了，你可能會想做一些關於粒子的東西。讓我們直面這個主題吧，每個人都愛粒子效果。不管你是否知道，你可以輕易地創造它們。
1.創建一個粒子系統
Three.js將粒子系統視為一個基本的幾何體，因為它就像基本幾何體一樣，即有形狀，又有位置、縮放因子、旋轉屬性。粒子系統將geometry物件裡的每一個點視為一個單獨的粒子。為什麼要這樣做？我想基於以下的原因：首先，整個粒子系統地繪製只需要調用一次某個繪製函數，而不是調用上千次；其次，這允許你設定一些全局的參數來影響你的粒子系統內的所有粒子。

即使是粒子系統被視為一個整體的對象，我們仍然可以為每個粒子單獨地著色，因為在繪製粒子系統的過程中，Three.js透過attribute變數colour向著色器傳遞了每一個頂點的顏色。我在本篇教程裡並不準備這樣做，如果你想知道這是怎麼完成的，你可以去GitHub上看Three.js的例行公事。

粒子系統可能還有一種特殊效果需要吸引你的注意：Three.js在粒子系統第一次被渲染的時候，會將其資料快取下來，之後你無法增加或減少系統中的粒子。如果你不希望看到某個粒子，你可以將它的顏色中的alpha值設為0，但你無法刪除它。所以你應在創建粒子系統的時候，就將所有可能需要顯示的粒子考慮進來。
開始建立粒子系統，只需要這麼多：

複製程式碼 程式碼如下:

// 建立粒子geometry
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial =
new TH. color: 0xFFFFFF,
size: 20
});
// 依序建立單一粒子
for(var p = 0; p // 粒子範圍在-250到250之間
var pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vertex(
new THREE.Vector3(pX, pY, pZ)
);
// 將粒子加入粒子geometry
particles.vertices.push( particle);
}
// 建立粒子系統
var particleSystem =
new THREE.ParticleSystem(
particles,
pMaterial);
// 將粒子情境系統加入場景
scene.addChild(particleSystem);

如果你運行： 1.你會發現粒子都是方的
2.粒子都不動
我們一個一個來修復。

2.風格 我們創建一個粒子基本材質時傳入了顏色和尺寸。我們可能想做的是傳入一張紋理圖片用來顯示粒子，而這樣就可以很好地控製粒子看上去的樣式了。

你也看到，粒子是以方塊形狀繪製的，所以我們也應該使用一張方形的紋理圖片。為了看起來效果更好，我也會使用加法混合，但這樣做必須確保紋理圖片的背景是黑色的而不是透明的。我理解的原因是：現在加法混合和透明材質之間不相容。但沒關係，最後看起來會很棒。

我們來更新一下粒子基本材質和粒子系統，加入一些加法混合下透明的粒子。如果你喜歡，你也可以用我的粒子圖片。

複製程式碼 程式碼如下:

// 建立粒子基本材質
var paterial =
new THREE.ParticleBasicMaterial({
color: 0xFFFFFF,
size: 20,
map: THREE.ImageUtils.loadTexture(
"images/particle.p." 🎜>blending: THREE.AdditiveBlending,
transparent: true
});
// 允許粒子系統對粒子排序，以達到我們想要的效果
particleSystem.sortParticles = true; >

這看起來已經好多了。現在來引入一點物理，讓粒子們動起來。
3.引入物理
預設情況下，粒子系統在三維空間中不運動，這很好。但我想讓他們動起來，而且我要讓粒子系統這樣運動：讓粒子繞著y軸旋轉。而且粒子在每個軸的範圍都在-250到250之間，所以繞著y軸旋轉以為這它們繞著系統地中心旋轉。

我還假定，你已經在某個地方有了幀循環的程式碼，和我在上一篇關於著色器中的教程中類似。所以這裡我們只需這樣：

複製程式碼 程式碼如下:

// 幀循環
function update() {
// 增加一點旋轉量
particleSystem.rotation.y = 0.01;
// 繪製粒子系統
renderer.render(scene, era); // 設定下次刷新幀時對update的呼叫
requestAnimFrame(update);
}

現在我們開始定義單一粒子的運動（譯者註：之前的旋轉是整個粒子系統的運動）。讓我們來做個簡單的雨點效果，
這包含一下幾步： 1.給每一個粒子賦一個初始為0的速度
2.在每一幀中，為每一個粒子賦一個隨機的重力加速度
3.在每一幀中，透過加速度更新速度，透過速度更新位置
4.當一個粒子運動出了視線，重新設定初始位置和速度
聽起來很多，其實程式碼寫起來很少。首先，在創建粒子的過程中，我們為每個粒子增加一個水平速度：

複製程式碼 程式碼如下:

// 為每個粒子建立一個水平運動速度
particle.velocity = new THREE.Vector3(
0, // x
-Math.random(), // y: 隨機數
0); // z

接下來，在幀緩衝中我們傳遞每個粒子，並且，當粒子離開屏幕底部需要重置時，重置其位置和速度。

複製程式碼 程式碼如下:

// 幀循環
function update(
// 增加旋轉量
particleSystem.rotation.y = 0.01;
var pCount = particleCount;
while(pCount--) {
// 取得單一粒子
while(pCount--) {
// 取得單一粒子
var partic = particles.vertices[pCount];
// 檢查是否需要重設
if(particle.position.y particle.position.y = 200;
particle.velocity .y = 0;
}
// 用隨機數更新水平速度分量，並依速度更新位置
particle.velocity.y -= Math.random() * .1;
particle .position.addSelf(
particle.velocity);
}
// 告訴粒子系統我們改變了粒子位置
particleSystem.geometry.__dirtyVertices = true;
// 畫
renderer.render(scene, camera);
// 設定下次呼叫
requestAnimFrame(update);
}

雖然不夠震撼，但這個粒子至少展示瞭如何做。你完全應該自己創造一些美妙的粒子效果，然後讓我知道。
這裡有個警告你應該知道，在幀循環中，我越雷池了：我在一次循環中遍歷了所有粒子，這實際上是種很粗放的方式。如果你的幀循環中做了太多的工作（譯者註：注意幀循環的js代碼是在cpu中運行的，它不像gpu，能一下子並發出成千上萬個簡單進程），瀏覽器就會卡頓，事實上如果你用了requestAnimationFrame，它視圖每秒刷新60次。所以還是優化你的程式碼，在幀循環中做盡量少的事情。 4.小結

粒子效果太棒了，是個人都愛粒子效果，而現在你知道如何在Three.js中加入粒子效果了。我希望你能用得順手，就跟前面一樣！ 同樣，這裡有原始碼下載，而且，讓我知道你喜歡它！