three.js - 双面闪烁-z指数战斗

Question

我想用强线框线制作网格。当我用两种 Material 绘制面时，一种用于着色，第二种用于线条(线框)，我会看到线条闪烁。 http://jsfiddle.net/jn_09/atTXN/3/我猜它与 z-index 直接相关。那么对于这种行为有什么解决办法吗？ WebGL 接缝的工作方式相同。

此案例仅适用于 Google Chrome。

非常感谢

Answer 1

这个问题在 GitHub 上多次被提出，涉及 CanvasRenderer。看来，当您使用 CanvasRenderer 时，您的脸部会在不同的摄像机角度发生位移。例如，当您使用某些图像作为纹理时 - 当您旋转对象时，您的图像将会扭曲。

看看当您将阴影面设置为全透明时会发生什么:http://jsfiddle.net/EEywu/ 。它们不再“跳过”您的线框(因为它们是不可见的)。

现在，这就是 WebGL 在游戏中出现的地方，因为与你所说的相反，它不会产生相同的效果，至少在默认情况下是这样。不好的部分 - 如果您使用 Windows，您将不会在 WebGL 上看到线框线的任何粗细:http://jsfiddle.net/XQz3g/ .

所以，我想你的选择是:使用 WebGL 来对抗这个问题，或者使用不同的几何图形(线平面)和增加的段量，如下所示:

var plane = new THREE.PlaneGeometry( 300, 300, 4, 4 );

这将创建您的平面，不仅有 2 个面(三角形)，而且有 32 个面(4x4x2)。这样，相机角度的面偏移量将最小，您不会注意到任何闪烁。如果您有许多由 Canvas 渲染的此类平面，这将会降低您的 FPS。

所以请告诉我这是否有帮助!