如何使用threejs在iPhone上启用视网膜分辨率render.setSize

Question

使用Threejs，可以将画布绘制两倍大，但是如何使用css缩小画布，使其以正确的分辨率显示在iPhone上。

renderer.setSize(window.innerWidth, window.innerHeight);

产生像素化图像，这有效：

renderer.setSize(window.innerWidth*2, window.innerHeight*2);

然后，画布对于屏幕来说太大了，我似乎无法让CSS正确缩小它。更不用说在配备Retina显示屏的笔记本电脑上进行此操作会令人反胃。这是因为它使用WebGL绘制到屏幕上吗？

在threejs中适应这些不同像素密度的最佳实践是什么？

Answer 1

您可以使用类似的方法，它将根据设备支持的像素设置像素比率：

renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

确保画布不是文档大小的两倍将是一些CSS，如下所示：

canvas {
  width: 100%;
  max-width: 100%;
  display: block;
}

有很多方法可以做到。这是另一个示例-https://codepen.io/Staak/pen/wNvZVP