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

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

时间：2019-09-04 11:04:03

用Three.js做了个字体的粒子系统动画，且`自定义性`极高，设置speedX=speedY=speedZ=1000的参数，截图如下：

预览地址：https://joeoeoe.github.io/Jonithan-s-Three.js/works/particale/TextParticale/demo.html

此文重讲思路，为方便解释，部分代码有做修改，此外因为部分代码太长，所以做的是截取，完整代码请看github

gitHub地址：/Joeoeoe/Jonithan-s-Three.js/tree/gh-pages/works/particale/TextParticale

（有兴趣的同学可以自己试试调参数尝试出不同的动画，滑稽脸.jpg）

Three的三大基本组件：相机，渲染器，场景在这就没必要说了吧，百度有很多资料

接下来我们分几个步骤来讲解如何做出这个粒子动画

一.思路叙述

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 curvesbevelEnabled: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++){//循环创建GeooriginGeo.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函数，先贴完整代码再讲过程

先搞清楚给部分变量：

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());}