Javascript 缓冲几何体创建粒子z索引

我创建了两个具有三个几何体的粒子，我想单击每个粒子显示相应的图像

但当我点击这个粒子时，图像显示出来，另一个粒子覆盖了它

我想知道如何使粒子脱离层次结构的控制，并使单击的粒子始终位于顶部

代码：`

var场景、摄影机、渲染器、控件；
var点；
var shaderMaterial；
var particleCount=2；
函数init（）{
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（45，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置x=15；
摄像机位置y=16；
摄像机位置z=35；
摄像机。注视（场景。位置）；
renderer=new THREE.WebGLRenderer（）；
setClearColor（0x000000，1.0）；
renderer.setSize（window.innerWidth、window.innerHeight）；
var灯=新的三个环境灯（0xCCCC）；
场景。添加（灯光）；
document.body.appendChild（renderer.doElement）；
创建粒子（）；
createGrid（）；
render（）；
document.querySelector（'canvas'）.addEventListener（'click'，interactive，false）；
}
函数createParticles（）{
var geometry=new THREE.BufferGeometry（）；
var位置=新的Float32Array（particleCount*3）；
变量大小=新的Float32Array（particleCount）；
var pop=新的Float32Array（particleCount）；
对于（变量i=0，i3=0；i0）{
if（相交！=相交[0]。索引）{
相交=相交[0]。索引；
如果（在索引之前！=相交）{
points.geometry.attributes.pop.array[beforeIndex]=0.0；
}
points.geometry.attributes.pop.array[INTERSECTED]=1.0；
beforeIndex=相交；
}
}
points.geometry.attributes.size.needsUpdate=true；
points.geometry.attributes.pop.needsUpdate=true；
}
函数createGrid（）{
var helper=新的三个.GridHelper（100,20,0x303030,0x303030）；
场景.添加（助手）；
}
函数渲染（）{
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
init（）
*{
保证金：0；
填充：0；
}
html，正文{
宽度：100%；
身高：100%；
背景：#000；
}
帆布{
显示：块；
}

高精度浮点；
均匀采样2D u_纹理_0；
均匀浮动u_时间；
浮动u__pop；
空干管（）{
vec2 uv=gl_PointCoord.xy；
vec4 rval=纹理2D（u_纹理0，uv）；
vec2后中心=（uv-vec2（.5.5））*2.0；
浮动距离中心=长度（后中心）；
浮点FadePocity=1.-平滑步长（0.8,1.，距离到中心）；
浮动不透明度=（1.-步长（0.8，距离中心））+FadePocity；
vec3 bgColor=mix（vec3（255,255,255.），vec3（252,222,184.），distanceToCenter）/255。；
vec4 color=vec4（混合（bgColor，rval.rgb，u_pop），1）；
颜色a=不透明度；
gl_FragColor=颜色；
}
属性浮动大小；
属性浮动pop；
浮动u__pop；
void main（）{
vec4 mvPosition=modelViewMatrix*vec4（位置，1.0）；
gl_PointSize=尺寸*（300.0/-mvPosition.z）；
gl_位置=投影矩阵*mvPosition；
u_pop=pop；
}
您对3D的工作原理存在误解，因此使用了错误的概念和术语。3D中没有“Z索引”。有（两个名称，相同的东西），它反映了对象与渲染的视点（摄影机、虚拟观察者）的距离。自然地，具有深度测试的深度缓冲区的目的是防止最远的对象在最近的对象之前渲染（这也允许通过防止计算看不见的像素进行优化）

此外，从背景到前景的显示不受任何层次结构的控制（除非引擎有意实现这种功能），对象只是按照提供的顺序进行渲染。如果禁用深度测试，则最新渲染的对象将显示在所有先前渲染对象的前面。在三维场景中，层次相对于变换，而不是显示顺序（除非对象在场景中渲染）