DOM変換座標と一致するようにThree.js座標系を変更するにはどうすればよいですか？

Question

たとえば、DOMのように、シーンの上/左からThree.jsの位置0,0,0を開始するにはどうすればよいですか？

位置が0,0,0のときは左上になり、サイズはCSSのピクセルサイズになり、このサイズは変更されません。ビューポートが変更されます。サイズが10の場合は、10個のCSS pxのスパンが（Z = 0の場合）画面に表示されることを意味します。

---

編集：私は、私は知らなかったフォーラムThree.js比較的新しい公式にこの質問を移動しています：https://discourse.threejs.org/t/how-can-we-make-three-js-scenes-use-dom-style-coordinates/962

Answer 1

あなたが（代わりに、視点の）適切な正字を設定する必要がありますキャンバスサイズをピクセルに合わせるための投影行列です。正投影行列は以下のように構築される：

S 0 0 0 | S = 2/right - left 
0 T 0 0 | T = 2/top - bottom 
0 0 U 0 | U = -2/far-near 
Tx Ty Tz 1 | 

ピクセル単位で画面空間（16台のフロートアレイで定義された4×4行列を仮定して）を有するようにマッチワールド空間に従ったようにあなたは、射影行列を定義することができる：

view[ 0] = 2.0/(canvasWidth); 
view[ 5] = 2.0/-(canvasHeight);  // Negate to invert Y coordinates 
view[10] = -2.0/farClip - nearClip; 
view[12] = -1.0;      // Translate X so left border start at 0 
view[13] = 1.0;      // Translate Y so top border start at 0 
view[14] = 0.0; 
view[15] = 1.0; 

これで、Three.jsでこれを設定する方法を見つける必要がありました。