前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【ThreeJS】自己写的一个ThreeJS的粒子发射器

【ThreeJS】自己写的一个ThreeJS的粒子发射器

作者头像
Ning@
发布2021-11-10 15:28:50
9910
发布2021-11-10 15:28:50
举报
文章被收录于专栏:烤包子烤包子

因为最近项目需要基于ThreeJS做很多粒子特效,感觉UE4的粒子发射器做这种效果会比较方便,所以就以UE4粒子发射器的思路手写了一个ThreeJS的粒子发射器,思路很简单: 1.生产粒子; 2.管理粒子; 3.粒子运动; 4.粒子发射; 后期还可以根据需要扩展很多其他的功能效果; 代码如下:

代码语言:javascript
复制
//生产粒子 Ning+
function GreatSprite() {
    var textureLoader = new THREE.TextureLoader();
    var mapC = textureLoader.load("img/LineSprite4.png");
    var materialC = new THREE.SpriteMaterial({
        map: mapC,
        transparent: true,
        opacity: 0, //初始化0-1
        alphaTest: 0.2
        // color: 0xffffff,
        // fog: true
    });
    var sprite = new THREE.Sprite(materialC);
    sprite.scale.set(0.8, 0.8, 1);
    return (sprite);
}

//管理粒子 Ning+
var SpriteGroup = new THREE.Group();
function GreatSpriteMany() {
    SpriteGroup = new THREE.Group();
    for (var i = 7; i >= 0; i--) {
        obj = GreatSprite();
        obj.position.set(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
        SpriteGroup.add(obj);
    }
    scene.add(SpriteGroup);
}

//粒子运动 Ning+
var TweenSprite;
function TweenSprite(obj) {
    TweenSpriteUP = new TWEEN.Tween(obj.position)
        .to({
            x: obj.position.x,
            y: 2,
            z: obj.position.z
        }, 6000)
        .easing(TWEEN.Easing.Cubic.Out);
    TweenSpriteUP.start();
    TweenSpriteUP.onComplete(function() {
        scene.remove(obj);
    });

    for (var i = obj.children.length - 1; i >= 0; i--) {
        let objMaterial = obj.children[i].material;
        TweenSpriteOpacity1 = new TWEEN.Tween(objMaterial)
            .to({
                opacity: 0.8
            }, 1000)
            .easing(TWEEN.Easing.Cubic.Out);

        TweenSpriteOpacity1.start();
        TweenSpriteOpacity1.onComplete(function() {
            TweenSpriteOpacity2 = new TWEEN.Tween(objMaterial)
                .to({
                    opacity: 0
                }, 1000)
                .easing(TWEEN.Easing.Cubic.Out);
            TweenSpriteOpacity2.start();
        });
    }

}

//粒子发射 Ning+
function CreateEmitter() {
    setInterval("GreatSpriteNew()", "500");
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档