Three.js –如何在不調整渲染器大小或縮放內容的情況下調整畫布大小？

Question

我正在使用Three.js畫布填充視口的網站。 我希望它在調整窗口大小時保持外觀不變。 完全沒有縮放比例。

目前，這是我正在做的事情：

• renderer.setSize(window.screen.width, window.screen.height)
• 然后，在init上調整大小：
  • camera.fov = window.innerHeight / window.screen.height;
  • camera.aspect = window.innerWidth / window.innerHeight;
  • renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);

這行得通，但是我擔心它效率不高，因為無論瀏覽器是全屏還是小窗口，渲染器的大小都是相同的。 setViewport是否成功限制了每一幀所需的計算，還是基本上所有內容仍在計算之后又被裁剪了？

Answer 1

對此的一個答案可以在官方文檔中找到，起初我看不到它，因為它隱藏在FAQ中 ：

visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;

這是一個適應的版本（在調整大小時執行此操作–或更確切地說，保存窗口尺寸並在節流函數中使用保存的值）：

renderer.setSize(window.innerWidth, window.innerHeight);
camera.fov = Math.atan(window.innerHeight / 2 / camera.position.z) * 2 * THREE.Math.RAD2DEG;
camera.aspect = window.innerWidth / window.innerHeight;

同樣重要的是不要忘記camera.updateProjectionMatrix(); ！