Three.js: パースペクティブカメラのFOVの計算

作成日 2012年02月02日  ·  19コメント  ·  ソース: mrdoob/three.js

私は3Dの経験がないので、3Dプロの常識かもしれないいくつかの問題に遭遇します;)。
さまざまなシーンサイズ(800x600、1200x100など)があります。
az位置が0で、幅と高さがシーンと同じオブジェクトがシーン全体を埋めるようにするために、どの式を使用できますか。

例:オブジェクトメッシュAは1200x100で、Z位置0にあります。シーンも1200x100です。 カメラはz位置1500にあります。オブジェクトをシーンに表示させるためのFOVは何ですか?

((A / B)* C)の線に沿った何かが私が探しているものです:D。

私の質問に答えるのに十分な才能のある人には、無限の称賛があります:)

Question

最も参考になるコメント

垂直視野vFOVとカメラからの距離distが与えられた場合の可視height dist

height = 2 * Math.tan( ( vFOV / 2 ) ) * dist;

目に見えるwidth

aspect = window_width / window_height;
hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
width  = 2 * Math.tan( ( hFOV / 2 ) ) * dist;

THREE.jsのカメラの視野パラメータは垂直方向のパラメータです。

2組の方程式を使用して必要なvFOVを2回計算し、大きい方の答えを選択します。

全てのコメント19件

垂直視野vFOVとカメラからの距離distが与えられた場合の可視height dist

height = 2 * Math.tan( ( vFOV / 2 ) ) * dist;

目に見えるwidth

aspect = window_width / window_height;
hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
width  = 2 * Math.tan( ( hFOV / 2 ) ) * dist;

THREE.jsのカメラの視野パラメータは垂直方向のパラメータです。

2組の方程式を使用して必要なvFOVを2回計算し、大きい方の答えを選択します。

返信ありがとうございます:)
でもちょっと混乱しています。 変数vFOVはどこから入手できますか?
シーンを埋める必要があるのはオブジェクトの高さですか?
もしそうなら、私は奇妙な数(1000の範囲)を取得しているので、それを最終的なFOVに変換するにはどうすればよいですか?

フィドルを作成しましたhttp://jsfiddle.net/dmYgr/6/
これを行う方法を教えてもらえますか?

改めてありがとうございました。 あなたの投稿から、私はあなたが私よりも天才だとすでに感じています;)

最初の方程式を使用してvFOVを解き、それをカメラのfovパラメーターとして使用します。

私のシーンは800 * 600です。
カメラの距離は1000です。

これらの数値を数式で使用するにはどうすればよいですか。
vFOVに何を入力すればよいかわかりません。

高さ= 2 * Math.tan((vFOV / 2))* dist; <-ここから始めるように言われていますが、vFOVの代わりに使用する番号は何ですか?

最初の方程式を使用して、次のようにvFOVを解きます

vFOV = 2 * Math.atan( height / ( 2 * distance ) );

次に、それをカメラのfovパラメーターとして使用します。

var renderWidth = 800;
var renderHeight = 600;
var cameraPosition = 1000;
var vFOV = 2 * Math.atan( renderWidth / ( 2 * cameraPosition ) );
var height = 2 * Math.tan( ( vFOV / 2 ) ) * cameraPosition;
var aspect = renderWidth / renderHeight;
var hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
var width  = 2 * Math.tan( ( hFOV / 2 ) ) * cameraPosition;

結果:
vFOV = 0.7610127542247298これは有効なFOVではありません

var vFOV = 2 * Math.atan( renderHeight / ( 2 * cameraPosition ) );
var height = 2 * Math.tan( ( vFOV / 2 ) ) * cameraPosition;

var aspect = renderWidth / renderHeight;
var hFOV = 2 * Math.atan( Math.tan( vFOV / 2 ) * aspect );
var width  = 2 * Math.tan( ( hFOV / 2 ) ) * cameraPosition;

vFOV = 0.5829135889557342これも有効なFOVではありません

私のために例を記入して、有効なFOV番号を与える例を示してもらえますか?
上記の例の正しい数は約37です

あなたのフィドルでは、

高さ=平面メッシュの高さ= 500。

距離= camera.z --plane.z = 1000-100 = 900。

vFOV = 2 * Math.atan(高さ/(2 *距離))= 0.5419ラジアン、つまり31.04度。

2 * Math.atan(500 /(2 * 900))= 0.5418937006768411私のブラウザによると(グーグルクローム)

申し訳ありませんが、ラジアンから度への変換を示すことを怠りました。 以前の投稿を更新しました。

どうもありがとうございます! :D
ああ、10回の返信が必要でしたが、今は機能しています:)。
再度、感謝します!

@Tobiasartz :-)

ウェストラングレー。 あなたは王です。 ありがとうございました。

これはとても役に立ちました!! ありがとう@WestLangley

ありがとう@WestLangley !!
ラジアンから度への変換を追加する必要があることに気付くのに時間がかかったので、ここに最終的なコードの例を追加します。

var distance = 1000;
var FOV = 2 * Math.atan( window.innerHeight / ( 2 * distance ) ) * 180 / Math.PI;
var camera = new THREE.PerspectiveCamera( FOV, window.innerWidth/window.innerHeight, 0.1, distance );
camera.position.z = distance;

@ Emanuele-Spatolaあなたの公式は意味がありません。 window.innerHeightはピクセル単位があります。 distanceおそらくそうではありません。 表示される高さは、距離と同じ単位である必要があります。

Tobiasartzのフィドルをその式で更新したところ、うまくいくようです。
http://jsfiddle.net/dmYgr/63/
キャンバスは500px、平面は495x495で、周囲には約5pxの境界線があります。
1000pxが有効な距離ではないのはなぜですか?

http://jsfiddle.net/dmYgr/65/

1000pxが有効な距離ではないのはなぜですか?

被写体の1000ピクセル前にカメラを置いたことはありますか?

実際のカメラを10フィート離れた場所に置いて、幅10フィートのシーンを見ることができます。 同様に、1000px離れた場所に仮想カメラを配置して、1000px幅のシーンを表示することもできます。

カメラの高さ、幅、距離がわかっているときにこれを使用します...

var distance = 1000,height=window.innerHeight,width=window.innerWidth
var diag = Math.sqrt((height*height)+(width*width))
var FOV = 2 * Math.atan( diag / ( 2 * distance ) ) * 180 / Math.PI;
var camera = new THREE.PerspectiveCamera( FOV, window.innerWidth/window.innerHeight, 0.1, distance );
camera.position.z = distance;

このようにして、高さ>幅などの状況も処理されます...

このページは役に立ちましたか?
0 / 5 - 0 評価