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

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，这样可以防止对象写入深度缓冲区。因此，无论是否有其他面部遮挡，每个面部都会被渲染。