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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞