Javascript 点云和纹理的三个js透明度问题

我有两个PointCloud对象，每个对象具有特定的结构和纹理。其中一个应该是可点击的，但另一个不能。让我们分别称它们为P1和P2

P1使用THREE.ShaderMaterial初始化为：

var p1Material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    attributes: attributes,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    transparent: true
});

var p2Material = THREE.PointCloudMaterial({
    size : SIZE,
    map : THREE.ImageUtils.loadTexture("icons/myAwesomeIcon.png"),
    sizeAttenuation : true,
    transparent: true
});

P2转而使用三点云材质作为：

var p1Material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    attributes: attributes,
    vertexShader: document.getElementById('vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent,
    transparent: true
});

var p2Material = THREE.PointCloudMaterial({
    size : SIZE,
    map : THREE.ImageUtils.loadTexture("icons/myAwesomeIcon.png"),
    sizeAttenuation : true,
    transparent: true
});

两个生成的THREE.PointCloud对象的sortParticles属性都设置为true

但是，我遇到了如下透明度问题：

（已删除-查看编辑）

除了白线，所有的东西都是纹理。球体纹理用于P2，其他纹理用于P1

我们可以看到P2的纹理与P1的纹理并不完全透明。但正如第二幅图所示，它们彼此对立。相反，同样的情况也发生在P1的纹理之间。但是，在同一场景中，有一个不同的示例：

（已删除-查看编辑）

P1的一些纹理还可以，但P2不想表现正常

我怀疑让纹理驻留在不同的点云中没有帮助。然而，由于P2的元素不应该是可点击的，出于性能原因，我决定将它们从批次中分离出来，因此有P1和P2。请注意，可选择性是通过单击某个对象并使用THREE.Raycaster完成的

你们知道我做错了什么吗

提前谢谢

编辑：显然，问题似乎是由于使用了缓冲几何体

这里有两个完全相同的JSFIDLE源，除了使用的几何体

我错过什么了吗

---

我不得不删除以前的链接，因为stackoverflow只允许我插入两个链接…--”

下面是ThreeJs github问题，以及一个可能的解决方案

---

诀窍是字母测试。在任何情况下，似乎都有一个与此相关的错误，即r69。

您介意分享代码吗？帮助会容易得多我正在JS fiddle中设置一些东西。JSFIDLE示例已经完成