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

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，这会阻止对象写入深度缓冲区。因此，每一张脸都会被渲染，无论另一张脸是否遮挡它。