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

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

此行为的发生是由于透明度渲染的内部工作方式。透明对象需要与不透明对象 sorted/rendered 分开。这确保对象将按预期在最终图像上呈现。（虽然不总是）

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

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

JSFiddle

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

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

Why transparency doesn't work on my mesh?

textures

three.js