three.js 创建粒子系统的问题?

Question

我初始化创建粒子系统的代码如下：

`var scene,camera,points,geom,render;

    scene=new THREE.Scene();

    camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,3000);
    camera.position.z=200;

    render=new THREE.WebGLRenderer();
    render.setSize(window.innerWidth,window.innerHeight);
    render.setClearColor(0xffffff);
    document.body.appendChild(render.domElement);
    
    function generateSprite() {
        var PI2 = Math.PI * 2;
        var canvas=document.createElement("canvas");
        canvas.width=32;
        canvas.height=32;
        var context2=canvas.getContext('2d');
        context2.beginPath();
        context2.arc( 16, 16, 16, 0, 2*Math.PI, true );
        context2.fillStyle="0x888888";
        context2.fill();
        var texture=new THREE.Texture(canvas);
        texture.needsUpdate=true;
        return texture;
    }
    function creatCloud(){
        var geom=new THREE.Geometry();
        var material=new THREE.PointsMaterial(
            {
                size:10,
                transparent:true,
                opacity:.5,
                map:generateSprite(),
                color:0xffffff
            }
        )
        var rang=40;
        for(var i=0;i<5;i++){
            var ptr=new THREE.Vector3(
                Math.random()*rang-rang/2,
                Math.random()*rang-rang/2,
                Math.random()*rang-rang/2
            );
            geom.vertices.push(ptr);
        }
        points=new THREE.Points(geom,material);
        points.matrixAutoUpdate=true;
        points.name="cloud";
        scene.add(points);

        renderer();
    }
    creatCloud();
    function renderer(){
        render.render(scene,camera);
        requestAnimationFrame(renderer);
    }

`

这样是可以创建一个粒子系统的。

但是我如何在当前的粒子系统里面 动态的增加几个新的粒子产生呢？

for(var i=0;i<5;i++){
                var target= new THREE.Vector3(
                    (0.5-Math.random())*40,
                    (0.5-Math.random())*40,
                    Math.random()*40
                )
                points.geometry.vertices.push(target)
            }

这段代码只能动态的增加顶点的粒子位置。如何能实现在当前的粒子系统动态增加或者删除某几个粒子呢？？？？？
谢谢。

我最终想实现的效果就是粒子之间的变换，比如一个粒子组成的球体，点击
一个按钮后，变化成一个圆柱体。但是球体和圆柱体的顶点数目不同，所以我的方法是动态的删减顶点的数目和更新订单的位置进行渲染。

Answer 1

可以用gui.js这个UI控件来写。

Answer 2

粒子后期渲染一般是通过着色器实现，语法上应该不支持对数组进行动态添加吧，可以重新渲染一个粒子系统