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 ，其他纹理用于 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只允许我插入两个链接... - ＆＃39;

Answer 1

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

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

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

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

1 个答案: