0

私は Web 開発者のバックグラウンドを持っており、今では Three.js を使用して単純な 2D サイド スクローラーを作成しています。私は 2D ゲームを作成していますが、3D 空間で描画して、時間が適切だと感じたときに簡単に 3D に変換します。Three.jsを選んだ理由 それは JavaScript です。私は Web 用に作成したり、新しいテクノロジを探求したりするのが好きなので、既に知っている言語で作成するのは楽しいでしょう。

しかし、今私の問題に。これは実際には技術的な問題ではありませんが、私は 3D 空間が初めてなので、考え方の問題です。Web で作業するときは、ピクセルまたはパーセンテージ (相対) サイズで考えるのに慣れていて、常に 2 軸 (X/Y) またはむしろ幅/高さです。しかし、慣れていない 3D 空間、カメラ、パースペクティブには頭が痛くなります。

3D 空間のサイズの問題をどのように考えるべきですか? カメラの視野は 800x600 のキャンバスで 45 度です。錐台は 1 (近い) と 1000 (遠い) です。これは、オブジェクトが (1) に近く、サイズが 800x600 の場合、実際にキャンバスを塗りつぶすということですか?

ご覧のとおり、私はこれと 3D 空間での考え方に不慣れで、これは私にとって新しい分野です。

4

3 に答える 3

1

プロジェクトに適したスケールを選択し、カメラのパラメーターを調整して、表示したいものを適切に表示します。そのため、実際の世界と同じようにサイズと位置を考えることができます。.

1 単位 = 1 m は非常に一般的な慣例ですが、実際には一貫性がある限り、好きなように設定できます。ミクロのものを扱うことが多いのであれば、1mmを基本単位と考えた方が適切かもしれません。Three.js は、単位系が何であるかを知る必要も気にする必要もありません。しかし、たとえば、惑星全体を 1mm 単位でモデル化しようとすると、非常に大きな値になり、浮動小数点数がどのように機能するかに関連する問題に遭遇する可能性があります。

ここでは、ビットマップ グラフィックスとは異なり、画面の解像度などはあまり関係ありません。ディスプレイに関連するピクセル パーフェクトな配置が本当に必要な場合 (たとえば、オブジェクト サイズを調整したり、オブジェクトが画面いっぱいに表示されるようにカメラを設定したり、特定のピクセル サイズで表示されるようにカメラを設定したりする場合)、それは可能ですが、多くの場合、非常に多くの計算が必要になります。

数学の部分に明確な答えを出すのは難しいですが、そのような特定の状況に対するさまざまなユースケース、質問、および回答があります。

OrtographicCamera を使用して、3D シーンを厳密に 2D (遠近法なし) ビューにすることも考えられます。これにより、ピクセルの配置/画面の位置とサイズの計算も簡単になります。

于 2013-09-27T01:32:52.870 に答える
1

三角法で考える必要があります。

キャンバスを埋めるには、ニア プレーンに近いオブジェクトをファー プレーンに近いオブジェクトよりも小さくする必要があります。

あなたの場合、キャンバスを埋めるニアプレーンのオブジェクトのサイズはどれくらいですか?

視野が 45 度の場合、カメラの頂点と近平面の中央と上部にある端点との角度は 22.5 度ですよね?

次に、オブジェクトからカメラまでの距離が 1 (平面に近い) の場合、キャンバスの中心から上部までの距離を埋めるこのオブジェクトの高さは、tan( 22.5 ) です。したがって、キャンバスを埋めるオブジェクトの高さは 2 * tan( 22.5 ) になります。一般に：

     height = 2 * distance_object_camera * tan( field_of_view / 2 )

また、この結果は、使用しているキャンバスのサイズとは無関係であることに注意してください。

于 2013-09-26T11:32:17.620 に答える