3

在设置我的视口后第二次调用 renderer.setSize() 后，我的场景似乎缩小到其原始大小的 25% 并移动到画布的左下方。我的用例需要多次调用 setSize，因为我希望用户能够随意进入和离开全屏模式。

我预计这将是我的程序中的一个错误，除了我已经设法在网络上的许多示例中重现它（所有示例都使用视口）。

这个来自 Three.js 主页：http: //i42.tinypic.com/s5a747.jpg

这是来自stemkoski.github.io：http://i42.tinypic.com/313qi5u.png

因此，我不确定问题是由于我的显卡、我的电脑、一些不寻常的设置，还是 Three.js 中的错误。我正在使用带有视网膜显示屏的 macbook pro，Nvidia GeForce GT 650M 1024MB。我已经能够在 chrome 和 firefox 中重现这一点。奇怪的是，如果我将外接显示器连接到计算机并将窗口拖到上面，刷新页面后问题就会消失。任何帮助表示赞赏。

4

3 回答 3

13

从 r70 开始，渲染器的设备像素比可以通过以下方式设置：

renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1)
于 2015-01-25T05:28:20.640 回答
5

正如 Gaitat 所说，标准显示器和视网膜显示器之间变化的是设备像素比 (DPR)。

但是需要调整的是视口大小，而不是渲染器大小。此代码在 Three.js r65 中的 Chrome 和 Firefox 上实现了 1:1 像素分辨率：

var DPR = (window.devicePixelRatio) ? window.devicePixelRatio : 1;
var WW = window.innerWidth;
var HH = window.innerHeight;
renderer.setSize( WW, HH );        
renderer.setViewport( 0, 0, WW*DPR, HH*DPR );
renderer.render( scene, camera );

这里有更多关于这个问题的信息。

于 2014-02-16T09:04:33.560 回答
1

创建渲染器时，传入devicePixelRatio选项；

var renderer = new THREE.WebGLRenderer({
  devicePixelRatio: window.devicePixelRatio || 1
});

您不必手动设置视口大小，我认为 devicePixelRatio 已添加到WebGLRendererr54 中。

于 2014-08-18T06:14:51.403 回答