如何复制给定的视口保持纵横比？

Question

我在适合窗口大小的视口中渲染了3D场景。因此，视口（相机）纵横比取决于窗口大小。在视口上方，我绘制了一个宽高比为16：9的框架，它也适合视口，并且在视口内垂直和水平居中。框架的目的是显示将以16：9的宽高比渲染视口的哪一部分。参见以下屏幕：

现在，我想在视口16：9中渲染相同的3D场景，其中将包含与上面屏幕上的橙色框完全相同的“像素”。因此，在另一个窗口中，我创建了一个宽高比为16：9的视口，将对象和相机的位置设置为与上一场景完全相同的位置/方向。这次，视口和相机的纵横比均为16：9。但是，在视口内渲染的像素不同于第一个屏幕上橙色框的像素（应将杆“切成两半”）：

我想我错过了一些为了从橙色框再现精确视口而必须进行的计算，但是我不知道该怎么做。我从第一个视口获得的数据：

• 视口的宽度/高度/纵横比
• 橙色边框的宽度/高度和位置
• 场景对象位置
• 相机位置/方向/纵横比

我从第二个视口获得的数据：

• 视口宽度/高度（宽高比= 16：9）
• 场景对象位置（与第一个视口相同）
• 相机位置（与第一个视口相同）

我需要的是在第二个视口中精确复制第一个视口（在橙色框内）。

Answer 1

PerspectiveCamera.js中的代码表明Three.js中的fov（视野）给出了垂直方向的角度。

top = near * Math.tan( _Math.DEG2RAD * 0.5 * this.fov ) / this.zoom

假设您使用默认的50°。然后该棕褐色将为tan（25°），除了JavaScript之外，您实际上需要以弧度为单位进行计算。如果要将宽度改为50°，则需要fov = 2 * atan(tan(50°/2) * 9/16)，但需要在度数和弧度之间进行转换。想法是，您使用切线，应用纵横比将其从宽度（要测量的位置）映射到高度（班级期望的位置），然后反转切线的计算。

但是也许您不想指定宽度的角度。也许您希望原始场景的垂直视场角为50°，但仍希望将调整后的场景设为该场景的16：9剪切版本。在这种情况下，您可以乘以比率比率。因此，如果您的原始图像是4：3，新图像是16：9，则乘以（9/16）/（3/4）也称为（9 * 4）/（16 * 3）也称为3 / 4，您可以一次将原始高度从宽度转换为新高度角。