Three.JS：奇怪的闪烁/渲染与透明的MeshPhongMaterial

Posted 2021-05-03

我的场景中有以下网格：

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/

答案

似乎透明圆柱体的一些面在飞机后面消失。你可以轻轻地将气缸移向相机，如下所示：

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

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

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