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

Three js transparency issue with PointClouds and textures

本文关键字：三个 js 透明度 问题 纹理      更新时间：2023-09-26

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

P1 使用 THREE 初始化。着色器材质为：

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

P2 反过来使用 THREE。PointCloudMaterial as：

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

两者都产生了三个。PointCloud 对象的 sortParticle 属性设置为 true。

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

（已删除 - 查看编辑）

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

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

（已删除 - 查看编辑）

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

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

关于我做错了什么的任何想法？

提前感谢！

编辑：显然问题似乎是由于使用缓冲区几何...

下面是两个完全相同的 JSFiddle 源，除了使用的几何图形。

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

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

我错过了什么吗？

我

不得不删除以前的链接，因为堆栈溢出只允许我插入两个链接...... --'

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

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

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

相关文章：