Three.js抗锯齿，长方体几何体仍然非常不锐化

我正在尝试用three.js中的BoxGeometrics创建一个简单的3d游戏。 一切都很好，但无论是在手机浏览器（safari）上还是在macbook的chrome上，我都无法在这些盒子上看到锋利的边缘。请参见下面的屏幕截图。

到目前为止，我尝试的是：将渲染器上的antialias设置为true（有帮助，但旋转立方体中仍然没有直线），设置渲染器像素比率（触摸单击相交不起作用，仍然是像素化线）。也尝试了FXAA着色器，但效果并不更好。 使用透视摄影机，将几何体与基本材质结合起来

我的问题是，使用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中，我只有画布{高度：100%；宽度：100%；}

---

更新2：此处的演示链接

不知何故，这段代码起到了作用，边缘现在明显变软了：

renderer.setPixelRatio(window.devicePixelRatio * 1.5);

---

不知怎的，这段代码起到了作用，现在边缘明显变软了：

renderer.setPixelRatio(window.devicePixelRatio * 1.5);

---

你能分享一个演示吗？官方的three.js示例在您的设备上看起来清晰吗？当然可以在three.js中获得清晰的边缘，但是很难猜测为什么在没有特定场景信息的情况下，它无法在您的情况下工作。看起来好像正在进行抗锯齿处理，但随后您的画布通过CSS进行了缩放。你有没有像

transform:scale（2.0）这样的CSS规则或类似应用于画布、div、页面等的内容？您可以共享演示吗？官方的three.js示例在您的设备上看起来清晰吗？当然可以在three.js中获得清晰的边缘，但是很难猜测为什么在没有特定场景信息的情况下，它无法在您的情况下工作。看起来好像正在进行抗锯齿处理，但随后您的画布通过CSS进行了缩放。你有没有像
transform:scale（2.0）这样的CSS规则或类似的东西应用于画布、div、页面等？