Three.js渲染质量

Question

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

当我旋转立方体时，我注意到渲染边缘的质量不是很高（在图片中，背面的边缘看起来是“锯齿形”）。我可以以某种方式改善它吗？

Answer 1

边缘的伪像称为aliasing

在WebGLRenderer中将抗锯齿设置为true

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

即

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

Answer 2

在这一点上可能有点太先进了，但是如果您以后想使用post-effects，则不能在渲染器上使用antialias：true来改善边缘。但这可以通过使用称为FXAA的后效果来实现。如果出于性能原因禁用了抗锯齿功能，也可以使用此功能。在较旧的手机或复杂的场景上，有时最好进行抗锯齿渲染，而使用后期效果。没有那么好，但是总比没有好。