如何让 Three.js 的渲染画面变清晰?

如果你初学 Three.js，可能会发现 Three.js 生成的画面模糊，有锯齿，不清晰。

解决模糊的问题，可以使用渲染器的 setPixelRatio() 方法。

renderer.setPixelRatio(window.devicePixelRatio)

设置后的效果如下，可以看到立方体边缘平滑了很多。

这个方法为什么有效？我们可以从设置前后的 Canvas 元素中找到答案。

window.devicePixelRatio 是设备像素比，即一个 CSS 像素对应多少个物理像素。当设备像素比大于 1 时，通常表示该设备具有高清显示屏。

为了在高清屏上显示清晰的图像，通常需要在更大的画布上绘制图像，然后等比例压缩为小尺寸。

假设浏览器的设备像素比是 2，即 window.devicePixelRatio = 2。

设置前的 Canvas 画布，实际像素为 1272x341，显示像素为 1272x341。此时画布上的一个像素对应着 4 个物理像素，画面就会显示不清晰。

设置后的 Canvas 画布，实际像素为 2544x682，显示像素为 1272x341。相当于把一个大画布缩小了一半。缩小后的画布上的一个像素对应一个物理像素，显示效果就会更精致。

如果想继续消除锯齿，还可以在新建渲染器时，修改它的 antialias 属性。

const renderer = new WebGLRenderer({ antialias: true })

完