How to calculate the z-distance of a camera to vie

问题:

How can one calculate the camera distance from an object in 3D space (an image in this case) such that the image is at its original pixel width.

Am I right in assuming that this is possible given the aspect ratio of the camera, fov, and the original width/height of the image in pixels?

(In case it is relevant, I am using THREE.js in this particular instance).

Thanks to anyone who can help or lead me in the right direction!

回答1:

Thanks everyone for all the input!

After doing some digging and then working out how this all fits into the exact problem I was trying to solve with THREE.js, this was the answer I came up with in JavaScript as the target Z distance for displaying things at their original scale:

var vFOV = this.camera.fov * (Math.PI / 180), // convert VERTICAL fov to radians

var targetZ = window.innerHeight / (2 * Math.tan(vFOV / 2) );

I was trying to figure out which one to mark as the answer but I kind of combined all of them into this solution.

回答2:

Trigonometrically:

A line segment of length l at a right angle to the view plane and at a distance of n perpendicular to it will subtend arctan(l/n) degrees on the camera. You can arrive at that result by simple trigonometry.

Hence if your field of view in direction of the line is q, amounting to p pixels, you'll end up occupying p*arctan(l/n)/q pixels.

So, using y as the output number of pixels:

y = p*arctan(l/n)/q
y*q/p = arctan(l/n)
l/tan(y*q/p) = n

Linear algebra:

In a camera with a field-of-view of 90 degrees and a viewport of 2w pixels wide, the projection into screen space is equivalent to:

x' = w - w*x/z

When perpendicular, the length of a line on screen is the difference between two such xs so by normal associativity and commutivity rules:

l' = w - w*l/z

Hence:

w - l' = w*l/z
z = (w - l') / (w*l)

If your field of view is actually q degrees rather than 90 then you can use the cotangent to scale appropriately.

回答3:

In your original question you said that you're using css3D. I suggest that you do the following:

Set up an orthographic camera with fov = 1..179 degrees, where left = screenWidth / 2, right = screenWidth / - 2, top = screenHeight / 2, bottom = screenHeight / - 2. Near and far planes do not affect CSS3D rendering as far as I can tell from experience.

camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
camera.fov = 75;

now you need to calculate the distance between the camera and object in such way that when the object is projected using the camera with settings above, the object has 1:1 coordinate correspondence on screen. This can be done in following way:

var camscale = Math.tan(( camera.fov / 2 ) / 180 * Math.PI);
var camfix = screenHeight / 2 / camscale;

1. place your div to position: x, y, z
2. set the camera's position to 0, 0, z + camfix

This should give you 1:1 coordinate correspondence with rendered result and your pixel values in css / div styles. Remember that the origin is in center and the object's position is the center of the object so you need to do adjustments in order to achieve coordinate specs from top-left corner for example

object.x = ( screenWidth - objectWidth ) / 2 + positionLeft
object.y = ( screenHeight - objectHeight ) / 2 + positionTop
object.z = 0

I hope this helps, I was struggling with same thing (exact control of the css3d scene) but managed to figure out that the Orthographic camera + viewport size adjusted distance from object did the trick. Don't alter the camera rotation or its x and y coordinates, just fiddle with the z and you're safe.