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

预览地址：https://joeoeoe.github.io/Jonithan-s-Three.js/works/particale/TextParticale/demo.html
此文重讲思路，为方便解释，部分代码有做修改，此外因为部分代码太长，所以做的是截取，完整代码请看github
gitHub地址：https://github.com/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函数，先贴完整代码再讲过程


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;

六.结束

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

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

html 延长直线,利用HTML5实现绘制3D线条延伸动画特效
特效描述:利用HTML5实现绘制3D 线条延伸动画特效.利用HTML5实现雷达地区扫描动画特效代码结构 1. HTML代码 ;(function() { 'use strict'; var c ...
vue 画布插件_一个Vue.js插件，用于使用EaselJS控制HTML5画布
vue 画布插件 vue-easeljs (vue-easeljs) A Vue.js plugin to control an HTML5 canvas using EaselJS. 一个Vue.j ...
教你如何利用canvas画布绘制哆啦A梦
教你如何利用canvas画布绘制哆啦A梦最近一直在练习使用canvas画布标签,今天教大家如何使用canvas画布绘制哆啦A梦.如图: HTML代码: <canvas id="my_ ...
电脑PHP动画制作画板,三分钟HTML5画布(Canvas)动画教程
此文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包. 它们都是开源的. 把鼠标放到上面的小丑脸上,然后移开,就会有如下效果. 第一步,画五官这个小丑没有耳朵和眉毛,所以只剩下三官 ...
HTML5利用canvas画布绘制哆啦A梦
效果图: 源码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
3dmax：3dmax三维动画之各种材质参数化设置(白色、地砖瓷器、木材质、布艺、塑料、不锈钢(转Vr质)、玻璃、水、Vr发光材质、Vr覆盖材质)、图文教程之详细攻略(切记收藏！)
3dmax:3dmax三维动画之各种材质参数化设置(白色.地砖瓷器.木材质.布艺.塑料.不锈钢(转Vr质).玻璃.水.Vr发光材质.Vr覆盖材质).图文教程之详细攻略(切记收藏!) 目录
使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
使用WebGL + Three.js制作动画场景 1
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
Unity-ShaderGraph制作2D动画精灵发光
Unity-ShaderGraph制作2D动画精灵发光项目设置准备素材编写ShaderGraph 总结项目设置普通的2D工程,在PackManager上下载Universal RP这样能安装 ...

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

目录：