序文
Three.JSは3DJSライブラリで、最も優れたWebGLオープンソースフレームワークの1つです。 WebGLに加えて、Three.jsはキャンバスとSVGタグに基づいたレンダラーも提供します。デバッグにChromeまたはFirefoxを使用することをお勧めします。
1。カメラ
グラフィックスのカメラは、3次元空間から2次元画面への空間がどのように投影されるかを定義しています。
投影方法の場合、カメラは直交投影カメラと視点投影カメラに分けられます。
2。2つのカメラの適用の違いと範囲
直交投影：
視点投影：
直交投影は、数学クラスの写真のようなものです。視点投影には基本的なポイントがありますが、つまり、距離のオブジェクトは近くのオブジェクトよりも小さく、近くで大きくて小さくなります。
ソフトウェアの描画とモデリングには、通常、直交投影が使用されます。他のほとんどのアプリケーションでは、通常、視点投影が使用されます。
3。直交プロジェクションカメラ
直交投影カメラのコンストラクター：
Three.othographiccamera（左、右、上、下、近く、遠い）
6つのパラメーターは、直交投影カメラによってキャプチャされた6つの面の位置を表します。
その中で、近くは、近くの平面とカメラの中心点との間の垂直距離を表しています。遠いは、遠い平面とカメラの中心点との間の垂直距離を表します。
カメラの水平方向と垂直比を維持するには、（右側）と（上部）の比率は、キャンバスのアスペクト比と一致する必要があります。
図からわかるように、近くと遠くの値は肯定的であり、遠い>近くでなければなりません。最後の2つの値が（0、0）、つまり、近くと遠くの値が同じである場合、視点の深さはなくなり、視聴本体全体が平面に押され、ディスプレイは正しくありません。
4。直交投影カメラの例
ソースコード：
<！Doctype HTML> <HTML> <ヘッド> <メタcharSet = "utf-8"> <title> 3.jsテスト2 </title> </head> <body onload = "init（）"> <canvas "> </canvas> <script =" text/javascript "src =" js/</</</</</< type = "text/javascript"> function init（）{var renderer = new 3.webglrenderer（{canvas：document.getElementbyId（ 'maincanvas'）}）; renderer.setClearColor（0x0000000）; varシーン= new 3.scene（）; //カメラを設定しますvarカメラ= new 3.othographiccamera（-2、2、1.5、-1.5、1、10）; camera.position.set（0、0、5）; //camera.lookat(new three.vector3（0、0、0））; shene.add（カメラ）; //キューブvar cube = new 3.mesh（new 3.cubegeometry（1、1、1）、new 3.meshbasicmaterial（{color：0xff0000、wireframe：true}））; shene.add（cube）; // render renderer.render（シーン、カメラ）; } </script> </body> </html>ここで、 THREE.MeshBasicMaterialのワイヤーフレームプロパティが真である場合、素材はワイヤーフレームにレンダリングされます。
現在の位置の後ろのエッジが正面のエッジと完全に一致することがわかります。
4.1ビューの長さと幅の比を変更する
ここでは、キャンバスのアスペクト比は4：3、カメラの水平距離は4、垂直距離は3であるため、長さと幅の比率は変更されません（1：1）。
カメラの水平距離が2に減少した場合、
var Camera = new 3.othographiccamera（-1,1,1.5、-1.5,1,10）;
オブジェクトは延長されます：
カメラの視野は狭くなり、視野内の立方体の横方向の割合が増加し、キューブの拡大として現れます。
4.2カメラの位置を変更します
例のカメラの位置は（0,0,5）です。カメラはデフォルトでZ軸の負の方向に配置されるため、原点でキューブを見ることができます。
カメラの位置を1ユニットで右に移動します。
var camera = new 3.othographiccamera（-2,2,1.5、-1.5,1,10）; camera.position.set（1,0,5）;
カメラはオブジェクトに面しているため、カメラが右に移動し、照らされているオブジェクトが左に移動します。
4.3ビューの位置を変更します
ビューを右に設定します。
var Camera = new 3.othographiccamera（-1,3,1.5、-1.5,1,10）; camera.position.set（1,0,5）;
カメラを右に動かすのと同じです。
4.4カメラの角度を変更します
camera.position.set（4、-3,5）; camera.lookat（new 3.Vector3（0、0、0））;
しかし、今ではカメラはZ軸の負の方向に沿って観察しているため、キューブを観察することはできません。黒だけが見られます。 Lookat関数を使用して、原点の方向を指定できます。
camera.lookat（new 3.Vector3（0、0、0））;
lookAt関数はTHREE.Vector3のインスタンスを受け入れることに注意してください。Camera.Lookat camera.lookAt(0, 0, 0)として記述しないでください
さて、上記は3つのコンテンツ全体であり、3つのコンテンツを学習している直交投影カメラを学習します。誰もが3.jsを学ぶことが役立つことを願っています。編集者は、次々と3.jsに関する記事を更新します。引き続きwulin.comに注意を払います。