如何定位相机，使对象在屏幕上始终具有相同的像素宽度和高度？ [英] How to position the camera so that the object always has the same pixel width and height on the screen?

问题描述

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

我想要相机定位在az索引处，这将导致立方体以完全相同的像素宽度和高度显示，而不管窗口的大小或宽高比如何。立方体位于0的z位置。摄像机需要放回到这个立方体。

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

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

  var aspectRatio = window.innerWidth / window.innerHeight; 
 var camera =新的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×100像素的正确尺寸。然后，我改变了高度，并保持相同的大小。我很高兴我有这个结果。

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

解决方案

在您的情况下更可能依赖于较小的窗口大小轴!!!因为宽高比方程通常在以下情况下不同：

1. width> height


2. width<高度





大多数呈现都是从 OpenGL 代码需要添加一个，如果完成：）。为了确保调整窗口的高度和宽度，并看看会发生什么。





。btw。后面的数学只是简单的三角形数学像这样：








其中一个 angle = 90 deg ，第二个是


  atan（h1 / z1）= atan（h0 / z0）
 h1 / z1 = h0 / z0 < - 三角形相似性
 z1 = z0 * h1 / h0 < - 这是你想要什么
  

其中：

h0 是控制轴中的一半大小（ x 或 y ）

h1 是立方体大小的一半

z0 离您最近的平面
<立方体位置（不要忘记将偏移量添加到立方体的中心）



所以立方体中心位置是：

$ $ p $ code> z1'=（z0 * h1 / h0）+ h1





I have a problem I don't know how to go about solving, maybe someone can give me a hint on how to solve it.

I want the camera to be positioned at a z index which will result in the cube being shown at exactly the same pixel width and height no matter what the size or aspect ratio of the window is. The cube is at a z position of 0. The camera needs to be positioned back looking at this cube.

So when the user sees the screen display, the user should see the cube having the exact same pixel width and height on their screen. Now I guess that the camera z position must be a function of the window width, height, aspect ratio and a constant.

How can I calculate A, B, C and D? I suspect this is a geometry problem but I don't know how to go about solving it. Perhaps I need to add the constraint that the object should have exactly the same width and height in pixels matching 100 pixels wide and 100 pixels high.

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 );

---

Update, I solved it with trial and error.

I don't understand the geometry of this or the maths of this, but what I did was I noticed that the objects size was dependant on the height of the window and not dependant on the width of the window. Again, I don't know why, but when I resized the height, the object became bigger or smaller but when I resized the width the object stayed the same.

So I decided its likely the height is the one element which determines the function and then I used trial and error by varying values until I got it at the right size, 100 by 100 pixels in size. Then I varied the height and it stayed the same size. I'm so happy I have this result.

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

解决方案

In your case is more likely dependent on the smaller window size axis !!! because aspect ratio equations usually differs for cases:

1. width > height
2. width < height

most renders have taken this behavior from OpenGL so may be your code needs adding one if to be complete :). To be sure just resize your window to be bigger in height then width and see what happens

btw. the math behind is just simple triangle math like this:

one angle = 90 deg and second is

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

Where:
h0 is your half size in control axis (x or y)
h1 is half cube size
z0 is near plane of your frustrum
z1 is cube position (do not forget to add the offset to center of cube)

so cube center position is:

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

这篇关于如何定位相机，使对象在屏幕上始终具有相同的像素宽度和高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！