Three.js抗锯齿，盒子几何形状仍然很不锐利

Question

我正在尝试在 Three.js 中使用 boxgeometry 创建一个简单的 3D 游戏。一切都很好，但我在这些盒子上没有锋利的边缘，无论是在移动浏览器（Safari）上还是在我的 MacBook 上的 Chrome 上。请参阅下面的屏幕截图。

到目前为止我尝试过的：将渲染器上的抗锯齿设置为true（有帮助，但旋转立方体仍然没有直线），设置渲染器像素比（触摸单击相交不起作用，并且仍然像素化线条。）还尝试了FXAA着色器，但结果是没有更好。使用透视相机、Boxgeometry 和基本材质。

我的问题是，使用 Three.js 是否有可能在这些立方体上有锋利的边缘？尤其是当它们非常小时（例如移动屏幕上的 30 个大小相同）。

使用 Three.js 版本 87、chrome 68、最新的移动 safari。

更新：这是我的渲染器设置：

renderer = new THREE.WebGLRenderer({
alpha: true,
antialias: true
   });
  renderer.setSize(window.innerWidth, window.innerHeight);
 renderer.setPixelRatio(window.devicePixelRatio); // doesnt do the trick and messes up the threex domevent touch inputs
  document.body.appendChild(renderer.domElement);


  canvas = document.getElementsByTagName('canvas')[0];
  window.onresize = resizeCanvas;
  resizeCanvas();

  function resizeCanvas() {
    canvas.style.width = '100%';
    canvas.style.height = '100%';

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
  }

在我的CSS中我只有canvas { height: 100%; 宽度：100%；}

update2：演示链接在这里https://jsfiddle.net/roxanfc4/11/

Answer 1

不知怎的，这个片段成功了，现在边缘明显更柔和了：

renderer.setPixelRatio(window.devicePixelRatio * 1.5);