Three.js 抗锯齿，盒子几何还是很不清晰

Question

我正在尝试使用 three.js 中的方框几何体创建一个简单的 3d 游戏。 一切正常，但无论是在移动浏览器 (safari) 上还是在我的 macbook 上的 chrome 上，我都没有在这些盒子上看到锋利的边缘。请参阅下面的屏幕截图。

到目前为止我尝试了什么:将渲染器上的抗锯齿设置为 true(有帮助但仍然没有来自旋转立方体的直线)，设置渲染器像素比率(触摸点击相交不起作用，并且仍然是像素化线条。)还尝试了 FXAA 着色器但结果并没有更好。 使用透视相机，Boxgeometry with Basic Material。

我的问题是，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%；

更新 2:演示链接在这里 https://jsfiddle.net/roxanfc4/11/

Answer 1

这个片段不知何故起到了作用，现在边缘明显更柔和了:

renderer.setPixelRatio(window.devicePixelRatio * 1.5);