Three.js渲染质量

Posted 2021-05-05

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

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

答案

边缘的伪像称为aliasing

在WebGLRenderer中将抗锯齿设置为true

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

即

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

另一答案

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