javascript - How to position the camera so that the object always has the same pixel width and height on the screen?

Question

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;

Answer 1

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