如何使用 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

如果是我，我会让 CSS 设置画布的大小。然后我会询问浏览器画布的尺寸是多少

const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;

并使用适当设置画布绘图缓冲区的大小

renderer.setSize(desiredWidth, desiredHeight, false);

false最后传递很重要，这样 Three.js 就不会搞砸 CSS

此外，我永远不会使用，setPixelRatio因为它只会导致错误和歧义。相反，我会计算我想要的大小并使用该大小。例子

const pixelRatio = window.devicePixelRatio;
const desiredWidth = canvas.clientWidth * pixelRatio | 0;
const desiredHeight = canvas.clientHeight * pixelRatio | 0;
renderer.setSize(desiredWidth, desiredHeight, false);

为什么要使用 CSS 并查找尺寸？

通过使用 CSS，您的代码可以在所有情况下工作。如果您希望画布全屏，或者您希望画布成为段落中的图表，或者您希望画布在弹性盒或网格中可拉伸，无论您如何操作，您都会获得正确的尺寸。

为什么不使用setPixelRatio？

当您使用 setPixelRatio 时，您现在拥有一个与您指定的大小不同的画布绘图缓冲区。在很多情况下您需要知道实际尺寸。这包括使用某些类型的效果、读取像素以进行 GPU 拾取、可能进行屏幕截图、用点进行绘制等...当您使用时，setPixelRatio您真的不知道画布绘图缓冲区最终会达到什么大小。是的，您相信代码只会乘以设备像素比，但它会四舍五入吗？向下舍入？明天情况会改变吗？你不知道。因此，通过不使用它，您就知道画布的大小。它始终是您调用时指定的尺寸setSize。这意味着您可以在任何地方使用该尺寸。您不必猜测何时适合使用指定的大小以及何时必须进行不同的数学运算。请注意，如果您计算错误，那么您的应用可能会在像素比为 1 的设备上运行，但在其他像素比的设备上会失败。如果不使用setPixelRatio这些错误，这些错误就变得不可能。

您可能根本不想设置像素比

如果像素比为 2，则设备需要绘制 4 倍的像素，就像像素比为 1 时一样。如果像素比为 3，则设备需要绘制 9 倍的像素。有些设备的设备像素比甚至为 3.5 或 4，即像素的 16 倍。这会使您的页面运行速度非常慢。仅仅因为设备的像素比高而盲目地设置像素比是导致页面缓慢的秘诀。很少有原生游戏会这样做，因为它们运行得太慢了。通常不设置它是合适的。

例子：

const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;

renderer.setSize(desiredWidth, desiredHeight, false);