Three.js透明点云没有正确融合点答案

【问题标题】：Three.js Transparent Point Cloud Not Blending Points Together CorrectlyThree.js透明点云没有正确融合点
【发布时间】：2021-04-17 22:16:30
【问题描述】：

我正在尝试使用THREE.Points 创建用于数据可视化的点云。我想让这些点透明，以便查看者可以了解这些点在特定区域中的密集程度。我正在使用球体几何和添加剂混合进行测试。

问题在于，显示为正方形的某些点与它们前面的点正确融合，而其他点则被它们前面的点简单地隐藏了。出于某种原因，混合在球体的下半部分似乎无法正常工作，这很奇怪，因为我没有使用任何灯光，而且它应该是对称的。我不确定为什么会发生这种情况或如何解决它。

直视球体：

从上往下看也似乎存在左右对称问题：

从球体底部向上看，我得到了想要的结果：

【问题讨论】：

【解决方案1】：

WebGL 的透明度很棘手，因为透明对象会写入深度图，而渲染器假定第一个精灵后面的其他精灵是隐藏的，因此它会跳过绘制它们。在这种情况下，绘制顺序非常重要，每次旋转相机时从后到前排列精灵将是一场噩梦。

解决问题的最简单方法是在材质中设置depthWrite: false，这样每个精灵就不会写入深度图。那么不管他们在前还是后，他们都会被吸引。

【讨论】：

所以在这种情况下，球体后半部的矩形在球体前部的矩形之前绘制，这就是透明度在顶部起作用的原因？
是的，暗灰色的瓷砖意味着首先绘制前面的瓷砖，然后在现有的前面的瓷砖周围绘制后面的瓷砖，所以你不会得到那种附加效果.相反，较亮的瓷砖意味着后面的瓷砖先走，然后整个前面的瓷砖被渲染在后面的瓷砖上，给人一种漂亮的叠加外观。