javascript - 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。

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

(已删除 - 查看编辑)

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

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

(已删除 - 查看编辑)

一些 P1 的纹理没问题，但 P2 的不想正常运行。

我怀疑让纹理驻留在不同的 PointClouds 中没有帮助。然而，由于 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。