移動設備方向的 Three.js 問題

Question

我正在測試一個用three.js 編寫的Web 應用程序的錯誤，我有報告稱平板電腦（特別是Android）上的用戶從現場得到了一些奇怪的行為。

這是應該呈現的相同視圖：

當他們更改設備方向時會發生這種情況，但在 Microsoft Edge 中運行 Windows 的 2 合 1 平板電腦上也有報道。 用戶在屏幕上滑動手指時會遇到類似的錯誤（瀏覽器想要垂直和水平滾動，然后跳回固定視圖）。 我還沒有在桌面上看到這種情況發生。

這是我的 onWindowResize 函數：

 function onWindowResize(event) {

    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight;

    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

    camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
    camera.updateProjectionMatrix();

    composer.reset();

}

有什么想法嗎？

Answer 1

我意識到我正在調整 fxaa 作曲家的大小並將其設置為屏幕寬度和高度：

effectFXAA.uniforms['resolution'].value.set(1 / SCREEN_WIDTH, 1 / SCREEN_HEIGHT); 

當我應該使用畫布寬度和高度時：

effectFXAA.uniforms['resolution'].value.set(1 / canvas.width, 1 / canvas.height);

更改此設置解決了我的問題，我現在可以毫無問題地調整大小。