javascript - 三.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/

标签： javascriptthree.js

Answer 1

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

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

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

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