如何在火狐和边缘中调整ThreeJS渲染器的大小

Question

我有一个简单的web应用程序与three.js的webgl视图。页面是响应性的，所以我需要随着窗口大小的变化来调整3d视图的大小。这在Chrome中运行良好，但在Firefox中不起作用，并且调整大小但在Edge中渲染黑色画布。

我使用的代码是：

canvasWidth = canvasHeight = window.innerWidth < 786 ? window.innerWidth : Math.min(window.innerWidth*0.35, 500)
renderer.setSize(canvasWidth, canvasHeight);
camera.aspect = canvasWidth / canvasHeight;
camera.updateProjectionMatrix();

此代码在调整窗口大小时执行。

该应用程序可在http://bit.ly/1oecKUe上找到

有什么建议吗？

Answer 1

当你像这样直接使用window.innerWidth和window.innerHeight时，调整画布的大小在火狐中起作用吗？

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

renderer.setSize( window.innerWidth, window.innerHeight );

这是three.js示例调整其画布大小的正常方法。也许你计算canvasWidth和canvasHeight变量的方式有问题...