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

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

我希望将相机定位在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;

解决方法:

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

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

顺便说一句.背后的数学只是简单的三角形数学,如下所示:

一个角度= 90度,第二个角度

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
上一篇:问题 B: 【例9.3】求最长不下降序列(基础dp)


下一篇:轻量级Delaunay三角测量库(适用于c)