Three.JS：怪异的闪烁/渲染带有透明的MeshPhongMaterial

Question

我的场景中包含以下网格物体：

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

因为我想淡入每个圆圈，所以我将“网格”设为透明。 当我移动相机时，会有一些奇怪的渲染，我不知道为什么会发生这种情况或需要更改什么。 一旦我删除透明，它将正常工作。

编辑

这是显示问题的小提琴。 css中的139行是创建圆柱的位置。 https://jsfiddle.net/mxmtsk/tb6gqm10/35/

Answer 1

透明圆柱的某些面似乎在飞机后面消失了。 您可以通过如下方式轻松地解决此问题：将圆柱体朝相机稍微移动：

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

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

更新小提琴： https : //jsfiddle.net/f8m1u4rg/