用Three.js做了个字体的粒子体系动画,可设置speedX=speedY=speedZ=1000
的参数转变动画结果,截图以下:
预览地点: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;
六.完毕
末了举行代码的整合
以上就是一切的重点思绪
,依据这个思绪,写好代码,就能够做出粒子动画了!