Javascript 重绘三个js元素

我用三个js绘制了带有图像的粒子，效果非常好，但我想在单击按钮（调用此函数）时使用开关更改图像：

但当你们点击多次，网站就会变慢

如何在不降低网站速度的情况下仅更新图像

编辑1

我更改代码如下：

var渲染器、场景、摄影机、ww、wh、粒子、mw、mh、mz、numState；
numState=0；
mz=6；//材料尺寸
ww=document.getElementById（'map-container'）。offsetWidth，
wh=450；
mw=ww*2；
mh=wh*2；
var centerVector=新的三个向量3（0,0,0）；
var previousTime=0
速度=10
isMouseDown=错误；
//渲染
renderer=new THREE.WebGLRenderer({
canvas:document.getElementById（“map”），
反别名：对
});
渲染器。设置大小（mw，mh）；
renderer.setClearColor（0x12347C）；
//景象
场景=新的三个。场景（）；
//摄像机
摄像机=新的三个正交摄像机（ww/-2，ww/2，wh/2，wh/-2，1，1000）；
摄像机位置设置（7,0,4）；
摄像机。注视（中心向量）；
场景。添加（摄影机）；
camera.zoom=4；
camera.updateProjectMatrix（）；
//几何学
var geometry=new THREE.geometry（）；
var材料=新的三点材料({
尺寸：mz，
颜色：0xFFFFFF，
sizeAttenuation:false
});
//粒子
粒子=新的三个点（）；
var getImageData=函数（图像）{
var canvas=document.createElement（“canvas”）；
canvas.width=image.width；
canvas.height=image.height；
var ctx=canvas.getContext（“2d”）；
ctx.drawImage（图像，0,0）；
返回ctx.getImageData（0，0，image.width，image.height）；
}
var drawTheMap=function（）{
geometry.dispose（）；
粒子。材料。处置（）；
particles.geometry.dispose（）；
对于（变量y=0，y2=imagedata.height；y850）{
mw=ww*2；
mh=wh*2；
mz=6；
mov1=2.2；
mov2=1.9；
粒子.material.size=mz；
}否则{
mw=ww；
mh=wh；
mz=3；
mov1=2；
mov2=2；
粒子.material.size=mz；
}
渲染器。设置大小（mw，mh）；
camera.left=ww/-mov1；
camera.right=ww/2；
camera.top=wh/mov2；
camera.bottom=wh/-2；
camera.updateProjectMatrix（）；
};
var onMouseup=function（）{
isMouseDown=错误；
}
var onMousedown=函数（e）{
isMouseDown=真；
lastMousePos={x:e.clientX，y:e.clientY}；
};
var onMousemove=函数（e）{
如果（isMouseDown）{
camera.position.x+=（e.clientX-lastMousePos.x）/100；
camera.position.y-=（e.clientY-lastMousePos.y）/100；
摄像机。注视（中心向量）；
lastMousePos={x:e.clientX，y:e.clientY}；
}
};
var render=函数（a）{
请求动画帧（渲染）；
particles.geometry.verticesNeedUpdate=true；
如果（！isMouseDown）{
摄像机位置x+=（0-摄像机位置x）*0.06；
相机位置y+=（0-相机位置y）*0.06；
摄像机。注视（中心向量）；
}
渲染器。渲染（场景、摄影机）；
};
var imgData；
var图像；
imgData=“数据：图像/png；base64，iVBORw0KGgoAAA…”；
const changeState=函数（状态，num）{
document.getElementById（'dropbox-choose'）。innerHTML=state；
numState=num；
开关（numState）
{
案例0：
imgData=“数据：图像/png；base64，iVBORw0KGgoAAA…”；
打破
案例1：
imgData=“数据：图像/png；base64，iVBORw0KGgoI…”
打破
}
image.src=imgData；
}
image=document.createElement（“img”）；
image.onload=init；
image.src=imgData < P>我知道我在前一个版本的回答中提到了处理，但是让我们考虑重新使用所有的对象。

粒子
-创建后立即将其添加到场景中

材料
-立即将其分配给
颗粒
；无需每次都重新分配

几何体
-不要全局创建它，我们将让它在
粒子
中工作

现在我们要做的是替换顶点并告诉three.js有新的顶点要上传到GPU

var drawTheMap=function（）{
让顶点=particles.geometry；//这用作引用！
vertices.length=0；//清除顶点数组
对于（变量y=0，y2=imagedata.height；y    const changeImg = function(num) {

    switch (num)
    {
        case 0:
            imgData ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA....";
        break;

        case 1:
            imgData = "data:image/png;base64,iVBORw0KGgoAAAAN..."
        break;
    }

    img.src = imgData;

}