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 );

有一些more info on the problem here。

Answer 3

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

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

您不必手动设置视口大小，我认为在r54中将devicePixelRatio添加到WebGLRenderer。

调整渲染器大小时，Threejs渲染区域缩小到25％

3 个答案: