Question

我有一个带有three.js webgl视图的简单Web应用程序。页面是响应式的，因此我需要在窗口大小更改时调整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时，您的画布调整是否适用于Firefox：

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

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

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

如何在Firefox和＆amp ;;中调整ThreeJS Renderer的大小边缘

1 个答案: