调整渲染器大小时,Threejs渲染区域缩小到25%

Question

在设置视口后第二次调用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中重现这一点.奇怪的是,如果我将外接显示器连接到计算机并将我的窗口拖到其上,则刷新页面后问题就会消失.任何帮助表示赞赏.

Answer 1

从r70设备到渲染器的像素比例可以通过以下方式设置:

renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1)

Answer 2

正如Gaitat所说,它是标准和视网膜显示器之间的设备像素比(DPR).

但是,需要调整视口大小,而不是渲染器大小.此代码在Chrome和Firefox上的三个.js r65中实现了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 );

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