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

Question

我正在尝试用three.js 中的boxgeometries 创建一个简单的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%； }

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

Answer 1

不知何故，这个 sn-p 做到了，现在边缘明显更柔和了：

renderer.setPixelRatio(window.devicePixelRatio * 1.5);