javascript - Three.js – 如何在不调整渲染器大小或缩放内容的情况下调整 Canvas 大小？

Question

我正在制作一个网站，其中包含填充视口(viewport)的 Three.js Canvas 。我希望它在调整窗口大小时保持视觉不变，即。根本没有缩放。

目前我正在做的事情是:

• renderer.setSize(window.screen.width, window.screen.height)
• 然后，在初始化和调整大小时:
  • camera.fov = window.innerHeight/window.screen.height;
  • camera.aspect = window.innerWidth/window.innerHeight;
  • renderer.setViewport(0, 0, window.innerWidth, window.innerHeight);

这行得通，但我担心它可能效率低下，因为无论浏览器是全屏还是只是一个小窗口，渲染器的大小都是相同的。 setViewport 是否成功地限制了每帧所需的计算，或者所有内容基本上仍然计算然后裁剪？

Answer 1

这个问题的一个答案可以在官方文档中找到，一开始我看不到，因为它是hidden in the FAQs :

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