3

2D 座標を 3D に投影するにはどうすればよいですか?

たとえば、幅が 256px の画像 (粒子として表される) があります。この画像が 2D 空間の原点 (0,0) の中心にあると仮定すると、正方形の垂直方向の辺は x = 128 と x = -128 になります。

したがって、この画像 (パーティクル) が原点 (0,0) の Three.js シーンに配置され、カメラが原点から CamZ 距離にある場合、元の 2D 座標を 3D に投影する方法を教えてください。画像 (パーティクル!) が画面に表示される幅を three.js 単位で指定します。

4

2 に答える 2

3

理解しやすい方法は-128, 128, 0、 、128, 128, 0、-128, -128, 0およびに頂点を持つジオメトリを作成すること128, -128, 0です。次にProjector、カメラを使用してそのジオメトリを投影するために使用します。これにより、-1 から 1 までの投影ポイントの配列が得られます。次に、それをビューポート サイズに掛ける必要があります。

于 2012-06-26T21:01:35.673 に答える
0

それを行う別の方法があります。2D と 3D の間の正確な変換は、ヒューリスティックに近似できます。ベクトルを射影するために three.js を使用するよりも実装が難しいことがよくありますが、指数変換を使用すると、多くの 2D/3D 変換をマッピングできます。

ここでの考え方は、指数イージング関数を使用して変換を計算することです。ほとんどのライブラリ (jQuery UI など) が使用するイージング関数は、Robert Penner Easing functionsです。

easeOutExpo 関数は、2D/3D 変換を近似する際に驚くほどうまく機能します。一般的には、次のようになります。

// easeOutExpo(time, base, change, duration)
var xPosition3D = xPosition2D * expo(xPosition2D, 0, coefficient, xMax2D);

係数が必要で、正確な数は 3D カメラの縦横比と焦点距離によって異なります。通常、-.2 のようなものがうまく機能します。

これが不十分な説明であることは承知していますが、うまくいけば、正しい方向に向けることができます。

于 2012-06-27T03:19:59.343 に答える