Javascript Three.JS：使用透明网格材质进行奇怪的闪烁/渲染

我的场景中有以下网格：

const cylinder = new Mesh(
  new CylinderGeometry(2, 2, 1, 32),
  new MeshPhongMaterial({
    color: color,
    shininess: 32,
    opacity: 0,
    transparent: true,
    specular: 0xffff82,
  }),
);

因为我想淡入每个圆，所以我使网格透明。当我移动相机时，会出现一些奇怪的渲染，我不知道为什么会发生这种情况，也不知道我需要改变什么。只要我去掉透明的，它就可以正常工作了

编辑

这是一把小提琴，显示问题所在。css中的第139行是创建圆柱体的位置。

---

透明圆柱体的某些面似乎消失在飞机后面。您可以通过向相机方向轻轻移动圆柱体来轻松解决此问题，如下所示：

cylinder.rotation.x = Math.PI / 2; 
cylinder.position.z = 0.5; // fix

这样，圆柱体就不会与平面相交

---

更新的提琴：

你能用提琴来显示问题吗？@GarrettJohnson我加了一把提琴谢谢，我试图更好地理解到底发生了什么。如果我只移动相机，而不是圆柱体和平面-它们怎么会消失在飞机后面？你看到的是一个透明度问题。由于默认情况下，

ShadowMaterial

的实例是透明的，因此场景中的所有对象都组织在同一渲染列表中，并因此排序在一起。通常，所有圆柱体都在平面之后渲染。如果你改变相机的位置，这不再是真的，它会产生所提到的伪影。只有当所有对象都以从后到前的方式渲染且几何体不相交时，渲染透明对象才起作用。感谢您的详细解释