PointClouds和纹理的三个js透明度问题

Question

我有两个 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
});

P2 轮到使用 THREE.PointCloudMaterial 作为：

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

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

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

（已删除 - 查看编辑）

一切都是纹理，除了白线。 P2 中使用 Sphere 纹理，P1 中使用其他纹理。

我们可以看到 P2 的纹理对 P1 的纹理并不是真正透明的。但它们是相互对抗的，如第二张图片所示。反过来，P1 的纹理之间也会发生同样的情况。然而，这里有一个不同的例子，在同一个场景中：

（已删除 - 查看编辑）

P1 的一些纹理还可以，但 P2 的纹理不正常。

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

关于我做错了什么有什么想法吗？

提前致谢！

编辑：显然问题似乎是由于使用 BufferGeometry...

这里有两个完全相同的 JSFiddle 源，除了使用的几何图形。

http://jsfiddle.net/vf6uu90t/3/

http://jsfiddle.net/2uh0q8Lr/2/

我错过了什么吗？

我不得不删除之前的链接，因为 stackoverflow 只允许我插入两个链接...--'

Answer 1

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

https://github.com/mrdoob/three.js/issues/5668

诀窍是 alphaTesting。无论如何，似乎有一个与此相关的错误是 r69。