three.js - 双面人脸闪烁-z指数格斗

Question

我想用强大的线框线制作网格。当我用双重材料绘制面时，一个用于阴影，第二个用于线条（线框），我得到了这种闪烁的线条。http://jsfiddle.net/jn_09/atTXN/3/我猜它直接连接到z-index。那么这种行为有什么解决方案吗？WebGL 接缝以相同的方式工作。

这个案例只是谷歌浏览器。

非常感谢

score 0 · Accepted Answer

这个问题在 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）。这样，摄像机角度处的刻面偏移量将最小化，并且您不会注意到任何闪烁。如果您将有许多这样的平面由画布渲染，这将杀死您的 FPS。

所以让知道这是否有帮助！

1 回答 1