如何在Firefox和Edge中調整ThreeJS渲染器的大小

我有一個簡單的web應用程序，帶有一個three.js webgl視圖。該頁面是響應式的，所以我需要隨着窗口大小的改變調整3d視圖的大小。這在Chrome中運行良好，但在Firefox中不做任何操作，並調整大小，但在Edge中呈現黑色畫布。如何在Firefox和Edge中調整ThreeJS渲染器的大小

我正在使用的代碼是：

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

建議？

來源

2016-02-05 Brian

是否在Firefox中的油畫作品的縮放，當您直接使用window.innerWidth和window.innerHeight這樣的：

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

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

這是正常的做法three.js所例子調整他們的帆布。也許在計算canvasWidth和canvasHeight變量的方式中存在問題...

來源

2016-02-05 15:49:43 Mugen87

canvasWidth和canvasHeight的值不會改變內容。我在原始問題中添加了一行代碼，以顯示如何計算這些值。 – Brian

好吧，如果你用這種方式計算'canvasWidth'和'canvasHeight'，畫布在很多情況下都不會改變。此外，如果我將我的Firefox的寬度減小到非常小的值，我確實有調整大小的效果。無論如何，我建議在Canavs尺寸（不僅寬度）上調整尺寸。 – Mugen87

對我而言，無論窗口大小有多大變化，webGL畫布的大小都不會在Firefox上發生變化。 – Brian

如何在Firefox和Edge中調整ThreeJS渲染器的大小

回答

相關問題