Three.js 锯齿介绍和消除锯齿

Question

通过 Three.js 开发应用程序的时候，场景渲染效果默认会有锯齿，需要通过设置代码消除锯齿。

渲染器锯齿属性 .antialias

设置渲染器锯齿属性 .antialias 的值可以直接在参数中设置，也可通过渲染器对象属性设置。

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

或

renderer.antialias = true,

渲染器方法 .setPixelRatio()

渲染器方法 .setPixelRatio() 用来设置设备像素比率。这通常用于 HiDPI 设备比如现在常见手机，以防止 Canvas 画布模糊输出。

renderer.setPixelRatio(window.devicePixelRatio)

devicePixelRatio 表示设备的像素比，也就是设备物理像素和独立像素的比例（物理像素 / dips），更多关于 devicePixelRatio 的介绍可以参考文章：https://www.wenjiangs.com/article/devicepixelratio.html