javascript - 如何定位相机，使物体在屏幕上始终具有相同的像素宽度和高度？

Question

我有一个我不知道如何解决的问题，也许有人可以给我一些解决方法的提示。

我希望将相机定位在 z 索引处，这样无论窗口的大小或纵横比如何，立方体都将以完全相同的像素宽度和高度显示。立方体位于 0 的 z 位置。相机需要向后定位以观察这个立方体。

因此，当用户看到屏幕显示时，用户应该会在屏幕上看到具有完全相同像素宽度和高度的立方体。现在我猜相机 z 位置必须是窗口宽度、高度、纵横比和常数的函数。

如何计算 A、B、C 和 D？我怀疑这是一个几何问题，但我不知道如何解决它。也许我需要添加一个约束，即对象的宽度和高度应该完全相同，以像素为单位匹配 100 像素宽和 100 像素高。

var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new PerspectiveCamera( 60.0, aspectRatio, 1.0, 10000.0 );

var A = 1.0;
var B = 1.0;
var C = 1.0;
var D = 1.0;
camera.position.z = A * window.innerWidth + B * window.innerHeight +
                    (C * aspectRatio) + D;
var geometry = new CubeGeometry( 100.0, 100.0, 0.0001 );

---

更新，我通过反复试验解决了它。

我不明白这个的几何学或数学，但我所做的是我注意到对象的大小取决于窗口的高度而不是窗口的宽度。同样，我不知道为什么，但是当我调整高度时，对象变大或变小，但当我调整宽度时，对象保持不变。

所以我决定它的高度很可能是决定功能的一个元素，然后我通过改变值来反复试验，直到我得到正确的尺寸，100 x 100 像素的尺寸。然后我改变高度，它保持相同的大小。我很高兴我有这个结果。

num A = 0.0;
num B = -0.867;
num C = 0.0;
num D = 0.0;

Answer 1

在您的情况下，更可能取决于较小的窗口尺寸轴!因为宽高比方程通常因情况而异:

1. width > height
2. width < height

大多数渲染都采用了 OpenGL 的这种行为，因此您的代码可能需要添加一个 if待补:) .确保只需将窗口的高度调整为比宽度大，然后看看会发生什么

顺便说一句。背后的数学只是简单的三 Angular 形数学，如下所示:

一个 angle = 90 deg第二个是

atan (h1/z1) = atan (h0/z0)
h1/z1 = h0/z0   <- triangle similarity
z1 = z0*h1/h0   <- this is what you want

地点:
h0是你在控制轴上的一半大小( x 或 y )
h1是立方体的一半大小
z0靠近你的平截头体平面
z1是立方体位置(不要忘记将偏移量添加到立方体中心)

所以立方体的中心位置是:

z1' = (z0*h1/h0)+h1