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(); ！