0

Interaction with Three.js を勉強しているときに頭に浮かんだいくつかの質問

1)ビューポート座標とは何ですか?

2) クライアントの座標とどう違うのですか?

3)どのようにしてこの式にたどり着いたか。

var vpx = ( eltx / div.offsetWidth ) * 2 - 1;
var vpy = - ( elty / div.offsetHeight ) * 2 + 1;
// vp->viewport, eltx->client coords,div->The div where webGL renderer has been appended.

4) ベクトルを取得する際に、ビューポート システムの 3 番目の座標を 0.5 から 1 として取得するのはなぜですか?

これらの質問とその概念について詳しく説明してくださるか、参考になる本を教えていただければ、本当にありがたいです。第 1 問の 3D ダイアグラムが利用できる場合に最適です。本当にありがたいことでしょう。

4

1 に答える 1

1

3D シーンはキャンバス コンテナー内にレンダリングされます。任意のサイズにすることができ、HTML ページのレイアウト内のどこにでも配置できます。非常に多くの場合、WebGL の例とアプリはフルスクリーンで作成されるため、キャンバスが画面全体を埋め尽くし、実質的に HTML レイアウトと同じサイズになります。しかし、常にそうであるとは限りません。WebGL シーンは、画像のように他の HTML コンテンツと一緒に埋め込むことができます。

通常、Three.js は、3D キャンバスが HTML ページ全体の座標とサイズにどのように関連するかを気にしたり、認識したりしません。WebGL キャンバス内では、まったく異なる座標系 (画面のピクセルとはまったく無関係) が使用されます。

3D キャンバス内でクリックを処理したい場合、残念ながらブラウザは HTML ページの左上隅から数えたピクセル値 (eltx と elty) しか提供しません。そのため、最初に HTML マウス座標を WebGL 座標 (Three.js で使用できるベクトル) に変換する必要があります。WebGL 座標では、キャンバスのサイズと位置に関係なく、0,0 はキャンバスの中心、-1,-1 は左上、+1,+1 は右下などです。

まず、キャンバスの位置を取得し、マウス座標から差し引く必要があります。あなたの式はそれを考慮していませんが、代わりに webgl コンテナーがページの左上隅にあると想定しています (キャンバスの位置は 0px 0px です)。それは問題ありませんが、たとえばコンテナーが移動されたり、HTML 本体に CSS パディングが含まれている場合は、正確ではなくなります。

次に、絶対マウス ピクセル位置 (前の手順で調整) を変換し、それをキャンバス内の相対位置に変換する必要があります。それがあなたの式がすることです。マウスの x 位置が 50px で、キャンバスの幅が 100px の場合、数式は (50/100) * 2 - 1 = 0 のようになり、キャンバス ビューポートの画面空間の中心になります。

これで、Three.js 3D シーンで意味のある座標が得られました。

于 2013-10-01T10:35:55.207 に答える