如何定位相机,使对象在屏幕上始终具有相同的像素宽度和高度?

时间:2014-02-25 02:34:48

标签: javascript math three.js geometry

我有一个问题,我不知道如何解决,也许有人可以给我一个如何解决它的提示。

我希望将相机定位在z索引处,这将导致立方体显示完全相同的像素宽度和高度,无论窗口的大小或宽高比如何。立方体的z位置为0.相机需要向后看,看着这个立方体。

因此,当用户看到屏幕显示时,用户应该看到立方体在屏幕上具有完全相同的像素宽度和高度。现在我想相机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;

1 个答案:

答案 0 :(得分:2)

在你的情况下更可能依赖于较小的窗口大小轴!因为纵横比方程通常因情况而异:

  1. width > height
  2. width < height
  3. 大多数渲染都是从 OpenGL 中采取此行为,因此您的代码可能需要添加一个if才能完成:)。确保只是调整窗口的大小,使其高度更大,然后看宽度,看看会发生什么

    btw。背后的数学就是这样简单的三角形数学:

    FOV

    一个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是您控制轴的半尺寸(xy
    h1是半立方体大小
    z0靠近你的截头体
    z1是立方体位置(不要忘记将偏移量添加到立方体的中心)

    所以立方体中心位置是:

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