0

我一直在测试对 Three.js 的移动支持，并在涉及 setSize 函数和多个视图时发现了一个怪癖。这是场景。

在 Chrome for Android (29.0.1547.59) 中的 Nexus 7 (Android OS 4.3) 上加载webgl_multiple_views示例时，整个渲染窗口未对齐，如此屏幕截图所示。

screenshot_2013-09-03-11-43-40

起初我怀疑与 setViewport 相关的问题，但在进一步检查后确定该WebGLRenderer.js函数setSize正试图通过乘以 devicePixelRatio 来纠正 WebGL 画布上下文大小，如下所示：

_canvas.width = width * this.devicePixelRatio;
_canvas.height = height * this.devicePixelRatio;

对我来说，这似乎是一个完全合理的方法，但这里的问题是，对于某些 Android 设备，系统似乎已经隐含了计算，从而导致了一个倾斜的场景。

我发现通过暗示默认像素比为1可以纠正问题，但我预计它可能会破坏许多行为正常的移动设备。如果您愿意，这是“修复”：

renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false, devicePixelRatio: 1 } );

我的问题是，有没有其他人遇到过这种情况？有没有人对通常缩放画布上下文有更一致的修复，以便它尊重设备像素比，但不会破坏某些 android 设备？

感谢您提供任何建议/帮助。

4

1 回答 1

4

试试这个功能。我已经对其进行了广泛的测试，它为我尝试过的每个设备报告了正确的设备宽度、高度和计算的像素比...

function getDeviceDimensions()                  // get the width and height ofthe viewing device based on its OS
{
    screenWidth = window.screen.width;                                                  // get the width
    screenHeight = window.screen.height;                                                // get the height 
    var computedPixelRatio =  (window.screen.availWidth / document.documentElement.clientWidth);                        // a more reliable measure of device pixel ratio due to android firefox bugs...
    computedPixelRatio = window.devicePixelRatio >= computedPixelRatio ? window.devicePixelRatio : computedPixelRatio;  // select whichever value is larger between pixel ratio methods
    if (navigator.userAgent.indexOf('Android') != -1)                                   // if the client is on an android system
    {
        screenWidth = screenWidth / computedPixelRatio;                                 // divide the reported width by the pixel ratio
        screenHeight = screenHeight / computedPixelRatio;                               // divide the reported height by the pixel ratio
    }
    //alert(screenWidth + " " + screenHeight + " " + window.devicePixelRatio + " " + computedPixelRatio);
}
于 2013-10-15T13:40:11.463 回答