Question

我正在建立一个填充视口的Three.js画布的网站。我希望在调整窗口大小时保持视觉上不变，即。根本没有缩放。

目前我正在做的事情：

renderer.setSize(window.screen.width, window.screen.height)
然后，在init和resize上：
- 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();！

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

1 个答案: