4

画像が元のピクセル幅になるように、3D 空間内のオブジェクト (この場合は画像) からカメラの距離を計算する方法を教えてください。

カメラの縦横比、fov、および画像の元の幅/高さをピクセル単位で指定すると、これが可能であると仮定するのは正しいですか?

(関連がある場合は、この特定のインスタンスで THREE.js を使用しています)。

私を助けたり、正しい方向に導いてくれる人に感謝します!

4

3 に答える 3

2

三角関数的に:

ビュー プレーンに対して直角で、ビュー プレーンに対して垂直な距離 n にある長さ l の線分は、カメラ上で arctan(l/n) 度の範囲になります。単純な三角法によってその結果にたどり着くことができます。

したがって、線の方向の視野がq、pピクセルに達する場合、ピクセルを占有することになりますp*arctan(l/n)/q。

したがって、出力ピクセル数として y を使用すると、次のようになります。

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

線形代数:

90 度の視野と 2w ピクセル幅のビューポートを持つカメラでは、スクリーン スペースへの投影は次のようになります。

x' = w - w*x/z

垂直の場合、画面上の線の長さは、そのような 2 つの x の差になるため、通常の結合性と可換性の規則により、次のようになります。

l' = w - w*l/z

したがって：

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

視野が実際に 90 度ではなく q 度である場合は、コタンジェントを使用して適切にスケーリングできます。

于 2013-01-26T02:33:30.917 に答える
0

元の質問では、css3D を使用していると言っていました。次のことを行うことをお勧めします。

fov = 1..179 度、左 = screenWidth / 2、右 = screenWidth / - 2、上 = screenHeight / 2、下 = screenHeight / - 2 で正投影カメラを設定します。近平面と遠平面は CSS3D レンダリングに影響しません。経験から言える限り。

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

ここで、オブジェクトが上記の設定のカメラを使用して投影されたときに、オブジェクトが画面上で 1:1 の座標対応を持つように、カメラとオブジェクトの間の距離を計算する必要があります。これは、次の方法で実行できます。

var camscale = Math.tan(( camera.fov / 2 ) / 180 * Math.PI);
var camfix = screenHeight / 2 / camscale;
  1. divを次の位置に配置します：x、y、z
  2. カメラの位置を 0, 0, z + camfix に設定します

これにより、レンダリングされた結果と css / div スタイルのピクセル値との 1:1 座標対応が得られます。原点は中心にあり、オブジェクトの位置はオブジェクトの中心にあることに注意してください。たとえば、左上隅からの座標仕様を達成するために調整を行う必要があります。

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

これが役に立てば幸いです。私は同じこと (css3d シーンの正確な制御) に苦労していましたが、オブジェクトからの距離を調整した Orthographic カメラ + ビューポート サイズがうまくいったことを理解することができました。カメラの回転やその x 座標と y 座標を変更しないでください。z をいじるだけで安全です。

于 2013-04-19T13:45:11.087 に答える