调整大小的地形相机宽高比

Question

无论如何可以在THREE中设置一个地形相机.JS这样：

1(它保持恒定的纵横比。即使我调整窗口大小。此纵横比始终保持不变，与窗口尺寸和纵横比无关，并避免失真。

2(无论窗口大小如何，场景始终完全可见。

谢谢！

Answer 1

假设您拥有当前的摄像机，并且希望确保整个场景适合其视图。您可以在OrthographicCamera中更改的变量left, right, top, bottom, near, far。您通常希望确保left = -right和top = -bottom。并且您需要确保该比率等于窗口的纵横比。因此，您只能更改单个刻度值。

我们要做的是确定这一点：我们将场景中的所有点转换为摄像机空间。然后，x、y 和 z 的最小值和最大值分别为我们提供了相机的最小边界。然后我们只需要确保纵横比正确。

现在，对所有点执行此操作通常计算量太大。相反，我们可以用半径r以c为中心的边界球来近似我们的场景。您可以在应用程序开始时计算一次，也可以将它们与场景一起保存。然后，我们不是确保场景适合视图，而是确保整个边界球体适合视图。

为正交相机执行此操作实际上非常简单。我们只需要将球体的中心转换为相机坐标：

var cInCameraSpace = new THREE.Vector3(); //do this once at initialization
//transform sphere center to camera space
cInCameraSpace.copy(c);
cInCameraSpace.applyMatrix4(camera.matrixWorldInverse)

然后我们可以找到边界：

var halfWidth = Math.abs(cInCameraSpace.x) + r;
var halfHeight = Math.abs(cInCameraSpace.y) + r;
camera.near = -cInCameraSpace.z - r;
camera.far = -cInCameraSpace.z + r;

现在，让我们确保保留纵横比。我假设我们已经知道窗口的纵横比为windowAspect.

if(halfWidth / halfHeight > windowAspect) {
camera.right = halfWidth;
camera.top = halfWidth / windowAspect;
} else {
camera.top = halfHeight;
camera.right = halfHeight * windowAspect;
}
camera.bottom = -camera.top;
camera.left = -camera.right;