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;

调整尺寸上的相机镜头纵横比

1 个答案: