Three.js抗锯齿，盒子的几何形状仍然很不清晰

Question

im试图在three.js中使用boxgeometries创建一个简单的3d游戏。 一切正常，但无论在移动浏览器（Safari）还是在Macbook上的chrome上，这些盒子上的边缘都没有锐利的边缘。请参见下面的屏幕截图。

到目前为止，我尝试了什么：将渲染器上的抗锯齿设置为true（有帮助，但旋转的多维数据集仍然没有直线），设置渲染器像素比（触摸单击相交然后不起作用，并且仍然像素化线。）还尝试了FXAA着色器但是结果并不好。 使用透视相机，“具有基本材质的盒形几何”。

我的问题是，Three.js甚至可能在这些立方体上具有锐利的边缘吗？尤其是当它们很小的时候（例如30个相等大小的手机屏幕）。

使用three.js版本87，chrome 68和最新的移动浏览器。

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

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中，我只有画布{高度：100％；宽度：100％; }

update2：此处的演示链接https://jsfiddle.net/roxanfc4/11/

Answer 1

此代码段以某种方式成功实现了这一点，并且边缘现在明显变得更柔和了：

renderer.setPixelRatio(window.devicePixelRatio * 1.5);