Three.js

Question

我正在制作一个 Three.js canvas 填充视口的网站。我希望它在调整 window 大小时保持视觉不变，即。完全没有缩放。

目前我正在做的事情是：

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

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

Answer 1

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

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

这是一个改编版本（在调整大小时执行此操作 – 或者更确切地说，保存 window 尺寸并在节流函数中使用保存的值）：

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 – 如何在不调整渲染器大小或缩放内容的情况下调整 canvas 大小？

Three.js – how to resize canvas without resizing renderer or scaling contents?

javascript

resize

canvas