使用Three.js，为什么webgl画布的高度和宽度是同一元素的css样式高度和宽度的两倍？

Question

我注意到在使用three.js时，webgl canvas元素的高度和宽度设置为将窗口调整大小函数中设置的css样式高度和宽度加倍。想知道为什么这是因为我在使用一些带有Effects Composer的自定义构建着色器时遇到了一些错误。

Answer 1

这可能与设备像素比率有关，我认为在视网膜屏幕上是2。以下是设置canvas-element的值的代码：https://github.com/mrdoob/three.js/blob/dev/src/renderers/WebGLRenderer.js#L353-L379

像素比率的默认值为1，如果您在全屏幕中进行像素着色器重度操作，它应该保持这种状态。在您的代码中搜索setPixelRatio()并将其删除。