Three.js渲染质量

Question

我是three.js和3D建模的新手。我设法加载了我的gltf模型，并使用three.js在浏览器中显示它，请看这张图片：

​

当我旋转立方体时，我注意到渲染边缘的质量不是很高(在图片中，背面的边缘看起来是Z字形的)。我能以某种方式改进它吗？

Answer 1

边缘上的伪影称为aliasing

在WebGLRenderer中将抗锯齿设置为true

https://threejs.org/docs/#api/en/renderers/WebGLRenderer.antialias

即

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

Answer 2

在这一点上可能有点太高级了，但是如果你以后想要使用post-effects，你不能在渲染器上使用反锯齿:true来改善边缘。但这可以使用称为FXAA的后期效果来实现。如果出于性能原因禁用了抗锯齿功能，也可以使用此功能。在较旧的手机上，或者具有复杂的场景，有时渲染时不使用抗锯齿，而使用后期效果会更好。虽然不是很好，但总比没有好。