ThreeJS PointMaterial 纹理透明背景问题答案

【问题标题】：ThreeJS PointMaterial texture transparent background issueThreeJS PointMaterial 纹理透明背景问题
【发布时间】：2015-11-23 04:51:55
【问题描述】：

我有一组用 THREE.Points 制作的粒子，我正在使用 THREE.PointMaterial 和纹理。纹理是用画布制作的笔触矩形，它可以工作，但只是部分工作，这就是问题所在。

在这里你可以看到我的粒子发生了什么：

如您所见，粒子的透明度仅对某些粒子有效，而对其他粒子无效。

这里会发生什么？

这是我用来创建材质的代码：

var material = new THREE.PointsMaterial( {
  size: this.particleSize,
  vertexColors: THREE.VertexColors,
  map: ct.getTexture(),
  transparent: true,
  fog: false } );

【问题讨论】：

标签： javascript three.js

【解决方案1】：

问题的原因是粒子没有按深度排序并按从后到前的顺序渲染。

解决办法是添加

material.alphaTest = 0.5;

然后，透明片段将被丢弃。

three.js r.73

【讨论】：

谢谢韦斯特兰利！我应用了这个解决方案，它的工作原理！但只是为了确保我理解我所做的，这个 alphaTest 属性作为一个阈值，将 alpha 值超过 0.5（在这种情况下）的所用纹理的每个像素设置为透明，以及那些具有值的像素小于 0.5 作为不透明像素？？再次感谢
不完全。对于小于 0.5 的 alpha 值，该片段将被丢弃。特别是，深度缓冲区不会被写入。