Three.js 粒子系统动画与发光材质——利用HTML5画布绘制

用Three.js做了个字体的粒子系统动画,可设置speedX=speedY=speedZ=1000的参数改变动画效果,截图如下:

《Three.js 粒子系统动画与发光材质——利用HTML5画布绘制》

预览地址:https://joeoeoe.github.io/Jon…
此文重讲思路,为方便解释,部分代码有做修改,此外因为部分代码太长,所以做的是截取,完整代码请看github
gitHub地址:https://github.com/Joeoeoe/Jo…
(有兴趣的同学可以自己试试调参数尝试出不同的动画,滑稽脸.jpg)

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函数中)

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函数中传入参数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;

六.结束

最后进行代码的整合
以上便是所有的重点思路,根据这个思路,写好代码,就可以做出粒子动画了!

    原文作者:Jonithan
    原文地址: https://segmentfault.com/a/1190000015862604
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞