問題描述
我有一個問題我不知道如何解決，也許有人可以給我一個提示.
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.
我希望將相機定位在 z 索引處，這將導致立方體以完全相同的像素寬度和高度顯示，無論窗口的大小或縱橫比是多少.立方體的 z 位置為 0.需要將相機放置在后面看這個立方體.
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.
因此，當用戶看到屏幕顯示時，用戶應該會在屏幕上看到具有完全相同像素寬度和高度的立方體.現在我猜測相機的z位置一定是窗口寬度、高度、縱橫比和常數的函數.
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.
如何計算 A、B、C 和 D?我懷疑這是一個幾何問題，但我不知道如何解決它.也許我需要添加一個約束條件，即對象在匹配 100 像素寬和 100 像素高的像素中應具有完全相同的寬度和高度.
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.
所以我決定高度可能是決定功能的一個元素，然后我通過改變值進行反復試驗，直到我得到正確的大小，大小為 100 x 100 像素.然后我改變了高度，它保持相同的大小.我很高興我有這個結果.
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:
寬度>高度寬度 <高度
大多數渲染都采用了 OpenGL 的這種行為，因此您的代碼可能需要添加一個 if 才能完成 :).確保將窗口的大小調整為高度大于寬度，然后看看會發生什么
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:
一個 angle = 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 是立方體位置(別忘了加上立方體中心的偏移量)
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
這篇關于如何定位相機以使對象在屏幕上始終具有相同的像素寬度和高度?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！