为什么透明材质会造成遮挡？
Why do transparent materials result in occlusion?
我有一个 threejs 场景，其中有几个网格（平面）都具有透明材质。渲染器已打开透明度，您可以看出是这种情况，因为 <body> 具有蓝到黑的渐变样式。
<body style="background: linear-gradient(to bottom, #1e5799 0%,#000000 100%);">
下面是我创建平面几何的方法：
const geometry = new THREE.PlaneBufferGeometry( 15, 15, 1 );
然后旋转它们使它们相交。
请注意，在某些地方，它们是合成的，两种材质混合在一起，但在其他地方，一个平面的一部分遮挡了另一个平面的一部分。我的理解是，一个平面被认为是另一个平面的 "in front"，这决定了它们的绘制顺序。但是，为什么一个透明的平面会遮挡另一个？。
也就是说，即使不可能以正确的顺序绘制相交平面，我仍然希望它们不正确合成, 但它们被遮挡了。
简短的回答是深度测试和 alpha 混合不能很好地协同工作。如果首先绘制的四边形更接近，则深度缓冲区将为整个四边形区域写入，而不管 alpha 值。之后绘制的粒子进一步无法通过深度测试，因此不会被绘制。
对此的部分解决方案通常是片段着色器中的 alpha 测试。 If (color.a < 0.01) {discard;} 或者禁用深度测试。
使用 material alphaTest 属性 删除这些工件。
在您的 material 上将 depthWrite 设置为 false：
material.depthWrite = false;
当您将其设置为 false 时，material 不再对深度缓冲区产生影响。对不起，我无法进一步解释，这只是个人经历。
Three.jsr73
我有一个 threejs 场景，其中有几个网格（平面）都具有透明材质。渲染器已打开透明度，您可以看出是这种情况，因为 <body> 具有蓝到黑的渐变样式。
<body style="background: linear-gradient(to bottom, #1e5799 0%,#000000 100%);">
下面是我创建平面几何的方法：
const geometry = new THREE.PlaneBufferGeometry( 15, 15, 1 );
然后旋转它们使它们相交。
请注意，在某些地方，它们是合成的，两种材质混合在一起，但在其他地方，一个平面的一部分遮挡了另一个平面的一部分。我的理解是，一个平面被认为是另一个平面的 "in front"，这决定了它们的绘制顺序。但是，为什么一个透明的平面会遮挡另一个？。
也就是说，即使不可能以正确的顺序绘制相交平面，我仍然希望它们不正确合成, 但它们被遮挡了。
简短的回答是深度测试和 alpha 混合不能很好地协同工作。如果首先绘制的四边形更接近，则深度缓冲区将为整个四边形区域写入，而不管 alpha 值。之后绘制的粒子进一步无法通过深度测试，因此不会被绘制。
对此的部分解决方案通常是片段着色器中的 alpha 测试。 If (color.a < 0.01) {discard;} 或者禁用深度测试。
使用 material alphaTest 属性 删除这些工件。
在您的 material 上将 depthWrite 设置为 false：
material.depthWrite = false;
当您将其设置为 false 时，material 不再对深度缓冲区产生影响。对不起，我无法进一步解释，这只是个人经历。
Three.jsr73