經常看到這樣一些場景：漫天飛舞的雪花、夜晚草叢中點點螢光、小河上下起的綿綿細雨…
這些浪漫？？的效果都可以用粒子系統來實現，粒子系統用THREE.js實現就是通過Points或者Sprite類來實現的啦。

一、Points

A class for displaying points. The points are rendered by the WebGLRenderer using gl.POINTS.

所以Points類就是通過 gl.POINTS來渲染的。

建構函式

Points( geometry : Geometry, material : Material )
 

各引數說明：
geometry — (optional) an instance of Geometry or BufferGeometry. Default is a new BufferGeometry.
material — (optional) a Material. Default is a new PointsMaterial with a random color.

• Geometry 和BufferGeometry的說明如下：

BufferGeometry

An efficient representation of mesh, line, or point geometry. Includes vertex positions, face indices, normals, colors, UVs, and custom attributes within buffers, reducing the cost of passing all this data to the GPU.

Geometry

Geometry is a user-friendly alternative to BufferGeometry. Geometries store attributes (vertex positions, faces, colors, etc.) using objects like Vector3 or Color that are easier to read and edit, but less efficient than typed arrays.

也就是說，Geometry的頂點位置，縮放，旋轉角，顏色，法線資訊等都是儲存在特定的類裡面，比如頂點位置使用Vector3

，顏色資訊使用Color。而BufferGeometry類的都是使用陣列儲存的，並且快取在了記憶體緩衝區裡，減低了對GPU的消耗。
THREE.js中基本上是每類Geometry都有一個BufferGeometry與之對應，比如我們平時使用的BoxGeometry和BoxBufferGeometry等。
Geometry和BufferGeometry的特點決定了他們各自的使用場景：Geometry使用類來管理自身資訊，便於操作，用來建立經常變化的物體；BufferGeometry由於使用陣列來管理，如果需要操作，必須去除其原始資訊，很難操作，而且buffer幾何體的資訊被快取在緩衝區中，所以Buffer幾何體適用於建立一旦建立就不需要修改的物體。

以上內容參考了這篇部落格

• 然後說說PointsMaterial

PointsMaterial

The default material used by Points.

簡單明瞭，就是Points類使用的材質。
PointsMaterial的建構函式傳入的引數可以是所有 Material的屬性，沒有擴充套件。
通常粒子系統用到的屬性有size, color, map, transparent等。

使用示例

• 程式碼

  這裡給出一個官網的示例，效果是一個星空圖

//This will add a starfield to the background of a scene
var starsGeometry = new THREE.Geometry();

for ( var i = 0; i < 10000; i ++ ) {

    var star = new THREE.Vector3();
    star.x = THREE.Math.randFloatSpread( 2000 );
    star.y = THREE.Math.randFloatSpread( 2000 );
    star.z = THREE.Math.randFloatSpread( 2000 );

    starsGeometry.vertices.push( star );

}

var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );

var starField = new THREE.Points( starsGeometry, starsMaterial );

scene.add( starField );

• 執行效果
  

想了解關於PointsMaterial的更多資訊可以看官網的介紹。

二、Sprite

官網的介紹：Sprite就是永遠朝向照相機的一個平面，不能產生陰影。

Sprite
A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied.

Sprites do not cast shadows

建構函式

Sprite( material : Material )

引數說明如下：

material - (optional) an instance of SpriteMaterial. Default is a white SpriteMaterial.

SpriteMaterial的說明也跟PointsMaterial一樣簡單明瞭，是Sprite使用的一種材質。其建構函式傳入的引數也可以是所有 Material的屬性。

使用示例

• 程式碼

var material = new THREE.SpriteMaterial();

for (var x = -5; x <= 5; x++) {

    for (var y = -5; y <= 5; y++) {

        var sprite = new THREE.Sprite(material);

        sprite.position.set(x * 10, y * 10, 0);

        scene.add(sprite);

     }
}

• 執行結果

想了解關於SpriteMaterial的更多資訊可以看官網的介紹。