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

我正在使用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是否成功限制了每一帧所需的计算，还是基本上仍在计算所有内容然后裁剪？

最佳答案

对此的一个答案可以在官方文档中找到，起初我看不到它，因为它是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();！

关于javascript - Three.js –如何在不调整渲染器大小或缩放内容的情况下调整 Canvas 大小？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49155879/