用Three.js做了個字型的粒子系統動畫，且`自定義性`極高，設定speedX=speedY=speedZ=1000的引數，截圖如下：

Three的三大基本元件：相機，渲染器，場景在這就沒必要說了吧，百度有很多資料
接下來我們分幾個步驟來講解如何做出這個粒子動畫

目錄：

1.思路敘述
2.建立文字幾何體並獲取點集
3.用HTML5畫布編寫發光粒子貼圖
4.建立粒子系統
5.如何完成粒子動畫
6.結束

一.思路敘述

1.建立文字幾何體，獲取點的集合，作為粒子動畫的終點（所以文字幾何體不用送入場景中！我們只是要個位置而已）
2.選取一個起始點，建立粒子系統（粒子貼圖也包含在這部分）
3.編寫粒子動畫，使粒子系統動起來

二.建立字型

先看函式架構
 

let fontLoader = new THREE.FontLoader();
fontLoader.loag('字型包路徑',onLoad函式，onProgress函式，onError函式)

這裡注意字型包的選擇，不同字型包的幾何體Verctor的數量是不一樣的，這裡我選擇`optimer_bold.typeface.json`的字型包，大家可以在three.js的集合包中找到各種各樣的字型包
待字型包載入完後，我們便呼叫onLoad函式，建立字型
（先擷取onLoad函式的一部分,餘下的主要程式碼均寫在onLoad函式中）
 

function (font) {
    let fontOptions ={
        font:font,
        size:1000,
        height:20,
        fontWeight:'bold',
        curveSegments: 12,  //number of points on the curves
        bevelEnabled:true,
        bevelThickness:2,
        bevelSize:8,
        bevelSegments:5
    };
    geometry = new THREE.TextGeometry("Jonithan" ,fontOptions);
    geo_ver = geometry.vertices
 

注意在onLoad函式中傳入引數font，然後配置字型樣式fontOptions，接著生成字型幾何體geometry，然後就獲取點集
這樣我們就獲得了終點位置

三.編寫發光粒子貼圖

首先創造canvas，並且呼叫createRadialGradient方法，用於繪製漸變色，繪製漸變色的原理是設定好一組同心圓，用addColorStop方法在不同位置設定顏色，如下程式碼所示

function createLightMateria() {
let canvasDom = document.createElement('canvas');
canvasDom.width = 16;
canvasDom.height = 16;
let ctx = canvasDom.getContext('2d');
//根據引數確定兩個圓的座標，繪製放射性漸變的方法，一個圓在裡面，一個圓在外面
let gradient = ctx.createRadialGradient(
    canvasDom.width/2,
    canvasDom.height/2,
    0,
    canvasDom.width/2,
    canvasDom.height/2,
    canvasDom.width/2);
gradient.addColorStop(0,'rgba(255,255,255,1)');
gradient.addColorStop(0.005,'rgba(139,69,19,1)');
gradient.addColorStop(0.4,'rgba(139,69,19,1)');
gradient.addColorStop(1,'rgba(0,0,0,1)');
 

顏色繪製好後我們把顏色配置給ctx，並繪製貼圖，等會用於與粒子map
程式碼如下

//設定ctx為漸變色
ctx.fillStyle = gradient;
//繪圖
ctx.fillRect(0,0,canvasDom.width,canvasDom.height);

//貼圖使用
let texture = new THREE.Texture(canvasDom);
texture.needsUpdate = true;//使用貼圖時進行更新
return texture;
}

這樣，我們等會就直接拿return的texture作為貼圖

四.建立起始點粒子系統

接下來我們就可以創造粒子系統了，先說一下我們要用到的三個api 
new Three.Geometry()
new Three.PointsMaterial()
new Three.Points()
思路：建立一個原點Geometry，遍歷向Geometry.vertices推入起始點，再呼叫new Three.Points()傳入Geometry和粒子配置生成粒子系統

首先做好粒子配置：

pointsMaterial = new THREE.PointsMaterial({
    color:0xffffff,
    size:80,
    transparent:true,//使材質透明
    blending:THREE.AdditiveBlending,
    depthTest:false,//深度測試關閉，不消去場景的不可見面
    map:createLightMateria()//剛剛建立的粒子貼圖就在這裡用上
})

接著建立Geomotry和粒子系統

let[x,y,z] =[0,0,0];
let originGeo = new THREE.Geometry();
for (let i = 0; i <originParticleNum; i++){//迴圈建立Geo
    originGeo.vertices.push(new THREE.Vector3(x,y,z));
}
let originParticleField = new THREE.Points(originGeo,pointsMaterial);
return originParticleField;

這樣子就獲得原點粒子系統了

五.如何完成粒子動畫

先看看Three.js中的動畫是如何完成的

function animate() {
    threeConf.stats.begin();
    threeConf.renderer.clear();
    threeConf.renderer.render(threeConf.scene,threeConf.camera);
    threeConf.control.update();
    particleAnimate();//粒子動畫函式
    threeConf.stats.end();
    requestAnimationFrame(animate);
  }

即通過不停地呼叫animate函式，進行渲染，這個animate函式中的particleAnimate()函式就是我們的粒子動畫，particleAnimate函式中就改變點的位置

接下來我們就來編寫particleAnimate函式，先貼完整程式碼再講過程

function particleAnimate () {
    for(let i = 0; i < pointsNum; i++){
        let originP = originVer[i],
            destiP =  destiVer[i];
        let distance = Math.abs(originP.x - destiP.x) + Math.abs(originP.y - destiP.y) + Math.abs(originP.z - destiP.z);
        if (distance > 1){
            //利用距離與座標差的餘弦值
            originP.x += ((destiP.x - originP.x)/distance) * speedX * (1 - Math.random());
            originP.y += ((destiP.y - originP.y)/distance) * speedY * (1 - Math.random());
            originP.z += ((destiP.z - originP.z)/distance) * speedZ * (1 - Math.random());
        }
    }
    originParticlae.geometry.verticesNeedUpdate=true;
}
```

先搞清楚給部分變數：
pointsNum：粒子數，
originVer：起始點集合，
destiVer：目標位置點集合（就是來自於TextGeometry），
speedX，speedY，speedZ分別表示點在各軸上每次移動的速度
originParticlae：起始點粒子系統
接下來講過程：

1.獲取起始點與目標點的大致距離

let distance = Math.abs(originP.x - destiP.x) + Math.abs(originP.y - destiP.y) + Math.abs(originP.z - destiP.z);

2.距離大於1時進行移動，這裡利用餘弦值進行距離的自增運算

if (distance > 1){
            //利用距離與座標差的餘弦值
    originP.x += ((destiP.x - originP.x)/distance) * speedX * (1 - Math.random());
    originP.y += ((destiP.y - originP.y)/distance) * speedY * (1 - Math.random());
    originP.z += ((destiP.z - originP.z)/distance) * speedZ * (1 - Math.random());
        }

3.最後設定更新粒子系統點為true

    originParticlae.geometry.verticesNeedUpdate=true;

六.結束

最後進行程式碼的整合
以上便是所有的重點思路，根據這個思路，寫好程式碼，就可以做出粒子動畫了。
嗯。