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

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

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

这里的问题是您的平面几何体位于圆柱体几何体内部，排序时它要么先渲染，要么晚渲染。反过来，这会导致您在这里遇到的这些伪像。整个透明度渲染比我要实现的要复杂得多。

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

JSFiddle

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