Fatal编程技术网
  • 3d/
  • 3d 为什么透明材质会导致遮挡？

3d 为什么透明材质会导致遮挡？

3d three.js

3d 为什么透明材质会导致遮挡？,3d,three.js,3d,Three.js,我有一个包含多个网格（平面）的threejs场景，所有网格（平面）都具有透明材质。渲染器启用了透明度，您可以看出是这种情况，因为具有从蓝色到黑色的渐变样式 <body style="background: linear-gradient(to bottom, #1e5799 0%,#000000 100%);"> 然后旋转它们，使它们相交 请注意，在某些位置，它们被合成为两种材质混合在一起，但在其他位置，一个平面的一部分会遮挡另一个平面的一部分。我的理解是，一个平面被认为是另一个平

我有一个包含多个网格（平面）的threejs场景，所有网格（平面）都具有透明材质。渲染器启用了透明度，您可以看出是这种情况，因为
具有从蓝色到黑色的渐变样式

<body style="background: linear-gradient(to bottom, #1e5799 0%,#000000 100%);">
然后旋转它们，使它们相交

请注意，在某些位置，它们被合成为两种材质混合在一起，但在其他位置，一个平面的一部分会遮挡另一个平面的一部分。我的理解是，一个平面被认为是另一个平面的“前面”，这决定了它们的绘制顺序。但是，为什么一个透明的平面会遮挡另一个平面？

也就是说，即使不可能按正确的顺序绘制相交平面，我仍然希望它们合成不正确，但它们被遮挡了

简而言之，深度测试和alpha混合不能很好地协同工作。如果首先绘制的四边形较近，则无论alpha值如何，都将为整个四边形区域写入深度缓冲区。之后绘制的粒子进一步未通过深度测试，因此无法绘制

对此的部分解决方案通常是片段着色器中的alpha测试
If（color.a<0.01）{discard；}
或禁用深度测试。

使用材质
alphaTest
属性删除这些瑕疵。

在材质上设置depthWrite为false： 
material.depthrite=false

将其设置为false时，材质不再对深度缓冲区产生影响。对不起，我不能进一步解释，这只是个人经历


Three.js r73
不
material.depthWrite=false帮助？谢谢你@FalkThiele的帮助。你应该加上它作为答案。

const geometry = new THREE.PlaneBufferGeometry( 15, 15, 1 );