为什么透明度在我的网格上不起作用？

Question

我的场景中有两个网格。中间一个圆柱和一个经典飞机。 我在我的圆柱体上应用了 png 纹理，这样我们就可以看穿了。它似乎适用于气缸。

在此屏幕截图上，您会很容易看到我的问题：我不明白为什么我的图像在我的圆柱体后面不可见。

我用于气缸的代码：

myCylinderMesh.material.transparent = true;
myCylinderMesh.material.side = THREE.DoubleSide;

如何才能看到隐藏在圆柱后面的图像部分？

编辑 1：

我添加了@ScieCode 发给我的代码：

myCylinderMesh.material.alphaTest = 0.5;

结果如下：

效果更好：现在我可以看到我的图像缺少的部分。但是缺少一件事：我的圆柱体的不透明度。我也应该在字母后面看到我的形象。 目前我有这个不透明度：

myCylinderMesh.material.opacity = 0.7;

你知道我错过了什么吗？谢谢

编辑 2：

这是我的两个网格的代码：

气缸：

geoCylinder = new THREE.CylinderBufferGeometry( 0.4, 0.4, 2*Math.PI*0.4/(2048/128), 64, 1, true ); 

matCylinder = new THREE.MeshBasicMaterial( { map:texture, transparent:true, color:0x000000, alphaTest: 0.5, opacity: 0.6, side: THREE.DoubleSide } );

meshCylinder = new THREE.Mesh( geoCylinder, matCylinder );

飞机：

geoPlane = new THREE.PlaneBufferGeometry( 0.8, 0.8 );

matPlane = new THREE.MeshBasicMaterial( { map: texturePlane, transparent:true} );

meshPlane = new THREE.Mesh( geoPlane, matPlane );

Answer 1

这种行为的发生是因为透明度渲染在内部是如何工作的。透明对象需要与不透明对象分开排序/渲染。这确保了对象将在最终图像上按预期呈现。 （但并非总是如此）

这里的问题是您的平面几何图形位于圆柱几何图形内，排序时将先渲染或稍后渲染。这反过来又会导致您在此处遇到这些伪影。整个透明度渲染比我想的要复杂得多。

由于您的平面对象不需要是半透明的，您可以简单地设置其材质的alphaTest 属性。这只会渲染 alpha 大于此值的片段像素。这也将防止该对象被认为是透明的，并且始终会首先渲染它，从而修复场景中的伪影。

JSFiddle

附加信息：当使用带有DoubleSide 的透明材料时，您可能会遇到自透明问题。发生这种情况的原因与我刚刚解释的相同，但发生在同一对象的面之间。这个问题的一个可能的解决方案是设置depthWrite = false，这可以防止对象写入深度缓冲区。所以每张脸都会被渲染，不管其他脸是否遮挡它。