三个图像失真

Question

我使用threejs绘制3D形状。我使用MeshLambertMaterial绘制此形状但图像显示不正确。

如何解决此问题？

Answer 1

我相信你正在经历简单的旧线/边缘混叠 - 这是自1970年代末以来一直存在的问题。这件神器被昵称为“锯齿”。当你设置antialias时，Three.js的WebGLRenderer应该帮助你：true，但是如果它在Chrome中绝对不起作用，唯一的解决方案是进行子像素渲染。添加以下行可以缓解问题，但性能成本明显：

renderer.setPixelRatio( 2.0 );

这是一个JSFiddle：https://jsfiddle.net/jtgvzsbo/

以上设置渲染器渲染的像素数是设备屏幕分辨率的两倍。您必须是决定线路质量或帧率的人。这是一种持续的平衡行为。如果用户不会一直看到立方体的这个精确角度，那么我就不会担心锯齿状并且需要平滑的帧速率。如果他们会不断地看着这个稍微旋转的立方体并且会留在它前面（也许它可以作为一个恒定的背景？），那么可能会选择视觉质量。希望这有帮助！

Answer 2

设置webglrenderer参数

    renderer = new THREE.WebGLRenderer({ antialiasing: true });

希望有帮助！