为什么我用three.js渲染的甜甜圈模型像N64画质、不够平滑？

你遇到的问题是TorusGeometry（甜甜圈几何体）默认配置精度不足导致的，可按以下优先级排查修改：

• 调高几何体分段参数
  甜甜圈几何体的构造函数为TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)，其中radialSegments是圆环径向的分段数、tubularSegments是圆管自身的分段数，二者默认值都偏低。你可以将参数调整到32、64的区间，示例代码：

  const torusGeometry = new THREE.TorusGeometry(1, 0.3, 32, 64)
  

  注意不要设置过高的分段数，避免不必要的性能损耗，常规场景下32~64的分段已经可以获得足够平滑的效果。
• 计算平滑顶点法线
  调整分段后如果仍有生硬的光照棱边，可调用几何体的顶点法线计算方法：
  torusGeometry.computeVertexNormals()
  该方法会自动生成适配曲面的平滑法线，搭配光照渲染效果更自然。
• 开启渲染器抗锯齿
  初始化WebGLRenderer时开启抗锯齿配置，可解决所有几何体边缘的锯齿问题：
  const renderer = new THREE.WebGLRenderer({ antialias: true })
• 适配高DPI屏幕
  高分辨率屏幕下未配置设备像素比也会导致画面发虚，添加以下配置即可：
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  像素比上限设置为2即可，更高的数值对视觉提升有限还会显著增加性能消耗。

问题对应截图：

内容的提问来源于stack exchange，提问作者Anthony