摘要：用做了個字體的粒子系統(tǒng)動畫，可設置的參數(shù)改變動畫效果，截圖如下預覽地址此文重講思路，為方便解釋，部分代碼有做修改，此外因為部分代碼太長，所以做的是截取，完整代碼請看地址有興趣的同學可以自己試試調(diào)參數(shù)嘗試出不同的動畫，滑稽臉的三大基本組件相機

用Three.js做了個字體的粒子系統(tǒng)動畫，可設置speedX=speedY=speedZ=1000的參數(shù)改變動畫效果，截圖如下：

預覽地址：https://joeoeoe.github.io/Jon...
此文重講思路，為方便解釋，部分代碼有做修改，此外因為部分代碼太長，所以做的是截取，完整代碼請看github
gitHub地址：https://github.com/Joeoeoe/Jo...
（有興趣的同學可以自己試試調(diào)參數(shù)嘗試出不同的動畫，滑稽臉.jpg）

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

1.思路敘述
2.創(chuàng)建文字幾何體并獲取點集
3.用HTML5畫布編寫發(fā)光粒子貼圖
4.創(chuàng)建粒子系統(tǒng)
5.如何完成粒子動畫
6.結(jié)束

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

先看函數(shù)架構(gòu)

let fontLoader = new THREE.FontLoader();
fontLoader.loag("字體包路徑",onLoad函數(shù)，onProgress函數(shù)，onError函數(shù))

這里注意字體包的選擇，不同字體包的幾何體Verctor的數(shù)量是不一樣的，這里我選擇optimer_bold.typeface.json的字體包，大家可以在three.js的集合包中找到各種各樣的字體包
待字體包加載完后，我們便調(diào)用onLoad函數(shù)，創(chuàng)建字體
（先截取onLoad函數(shù)的一部分,余下的主要代碼均寫在onLoad函數(shù)中）

fontLoader.load("../../../package/font/optimer_bold.typeface.json",
        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 = getGeoVer(geometry);
            .....

注意在onLoad函數(shù)中傳入?yún)?shù)font，然后配置字體樣式fontOptions，接著生成字體幾何體geometry，然后就獲取點集
這樣我們就獲得了終點位置

首先創(chuàng)造canvas，并且調(diào)用createRadialGradient方法，用于繪制漸變色，繪制漸變色的原理是設定好一組同心圓，用addColorStop方法在不同位置設定顏色，如下代碼所示

function createLightMateria() {
let canvasDom = document.createElement("canvas");
canvasDom.width = 16;
canvasDom.height = 16;
let ctx = canvasDom.getContext("2d");
//根據(jù)參數(shù)確定兩個圓的坐標，繪制放射性漸變的方法，一個圓在里面，一個圓在外面
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作為貼圖

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

首先做好粒子配置：

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

接著創(chuàng)建Geomotry和粒子系統(tǒng)

let[x,y,z] =[0,0,0];
let originGeo = new THREE.Geometry();
for (let i = 0; i 
這樣子就獲得原點粒子系統(tǒng)了
五.如何完成粒子動畫
先看看Three.js中的動畫是如何完成的
function animate() {
    threeConf.stats.begin();
    threeConf.renderer.clear();
    threeConf.renderer.render(threeConf.scene,threeConf.camera);
    threeConf.control.update();
    particleAnimate();//粒子動畫函數(shù)
    threeConf.stats.end();
    requestAnimationFrame(animate);
  }
即通過不停地調(diào)用animate函數(shù)，進行渲染，這個animate函數(shù)中的particleAnimate()函數(shù)就是我們的粒子動畫，particleAnimate函數(shù)中就改變點的位置
接下來我們就來編寫particleAnimate函數(shù)，先貼完整代碼再講過程
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：粒子數(shù)，
originVer：起始點集合，
destiVer：目標位置點集合（就是來自于TextGeometry），
speedX，speedY，speedZ分別表示點在各軸上每次移動的速度
originParticlae：起始點粒子系統(tǒng)
接下來講過程：
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.最后設置更新粒子系統(tǒng)點為true
    originParticlae.geometry.verticesNeedUpdate=true;
六.結(jié)束
最后進行代碼的整合
以上便是所有的重點思路，根據(jù)這個思路，寫好代碼，就可以做出粒子動畫了！