three.js - Three.js - 双面半透明材料只能从某些角度工作

Question

我目前正在使用three.js，并尝试使用可以从各个角度查看的半透明材料来创建3D 体验。我注意到，根据摄像机角度，只有网格的某些部分是半透明的，并且会显示它们背后的内容。在下面的这个例子中，我创建了两个半圆柱体并应用了相同的透明材料和堆栈溢出标志。左边的半圆柱正确地显示了最近表面上的标志，以及它后面的表面。右边的半圆柱只显示最近表面上的标志，并没有渲染包裹在它后面的标志。但是，它确实正确地渲染了背景图像，因此材质仍然被正确地视为透明：

如果我将轨道摄像机旋转 180 度左右，原来无法透视的一侧现在可以工作，而另一侧则表现出错误的行为。这让我相信它与相机位置/深度排序有关。本例中的材质是一个标准的 MeshPhongMaterial，透明设置为 true，侧面为 DoubleSide，以及透明堆栈溢出徽标的单个贴图。几何体由一个末端开口的 CylinderGeometry 形成。任何帮助将不胜感激！

标签： three.jscameratransparencyangle