Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています(^^) 週末はレストランやコンビニのお菓子のことを書いています。

Three.jsの基本③

今回も、Three.jsの解説やりまーす(笑)
ちなみに、前回は、レンダラーや画面サイズ指定などをやりましが、今回は、カメラについてやります。


introduction.htmlの②カメラ処理の部分です。

  var camera;                                                                       
  var controls;                                                                   
  function initCamera() {                                                        
    camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );    
    camera.up.x = 0; camera.up.y = 0; camera.up.z = 1;                          
    camera.position.set(1394, 1416, 854);                                      
    controls = new THREE.OrbitControls(camera,renderer.domElement);          
  }

まずは、ここから。

camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );

Three.jsには2種類カメラがあります。透視投影と正投影です。
違いは、

  • 透視投影(PerspectiveCamera)…通常生活における物の見え方と同じ
  • 正投影(OrthographicCamera)…物体の見た目の大きさが視点からの距離によらず、変わらない(どこから見ても物体のサイズは同じ)

こんな感じです。(この辺りをもっと知りたい人はWikipediaを見てください。)
写真で見ると、こんなかんじです。同じ位置から撮っています。

・透視投影
f:id:gupuru:20131118195702p:plain

・正投影
f:id:gupuru:20131120182340p:plain

正投影で、球体によった感じはコレ。
f:id:gupuru:20131120182504p:plain

扱いやすいのは、透視投影だと、ぼくは思いました(笑)
でも、見る位置によって、物体のサイズが変わるのがイヤと言う人は正投影の方がいいのかな(笑)

では、透視投影や正投影のクラスの説明をします。(widthは画面横サイズ,heightは画面縦サイズが入ってます。)

・透視投影
 PerspectiveCamera( 視野角(0~90) , アスペクト比(縦横比) , カメラから視体積の手前までの距離 , カメラから視体積の奥までの距離);
例:

camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );

・正投影
 OrthographicCamera(カメラ中心座標からの左側の長さ , カメラ中心座標からの右側の長さ , カメラ中心座標からの上側の長さ , カメラ中心座標からの下側の長さ , カメラから視体積の手前までの距離 , カメラから視体積の奥までの距離 );
例:

 camera = new THREE.OrthographicCamera( width/-2,width/2,height/2,height/-2,0.1 , 2000 ); 


次は、カメラの中心座標とカメラの位置設定です。

こちらは、カメラ中心座標の設定です。

    camera.up.x = 0; camera.up.y = 0; camera.up.z = 1;                        

こういう書き方も出来ます。

    camera.up.set(0,0,1);                        

中心座標は、0か1、どちらかだけです。100とかは無いです(笑)
また、(1,1,0)とかも無いです。(0,0,1),(0,1,0),(0,0,1)だけです。
この中心座標は、説明するより、実際にやったほうが、どういうものかが分かりやすいです。
簡単に言うと、カメラの上方向を決めてるかんじですかね~
zを1にすると、z軸が上になり、yを1にすると、y軸が上になる感じです。

こちらは、カメラ位置設定です。

camera.position.set(1394, 1416, 854);

こういう書き方も出来ます。

    camera.position.x = 1394;
    camera.position.y = 94;
    camera.position.z = 14;                      

カメラの位置設定です!
他に説明する事は、ないです(笑)

最後に、

controls = new THREE.OrbitControls(camera,renderer.domElement);

こいつをやります。
コレは、マウスドラッグやマウスホイールによるカメラ移動を行うためのOrbitControlsクラスを宣言している所です。
こいつは、Three.jsに記述されている標準クラスではなく、「OrbitControls.js」で定義されています。
Three.jsダウンロードフォルダ内のexamples/js/controlsにあります。
他にも、「OrbitControls.js」以外にも色々な奴があります。
「OrbitControls.js」をつかうと、マウスドラッグやマウスホイールによるカメラ移動をわざわざ自分で作る手間が省けます!
「OrbitControls.jsなんか使わないよ!自分でやる!」という人は、このコードは、削除してください(笑)
「OrbitControls.js」を使わない場合は、

camera.lookAt({x:0,y:0,z:0});

コレを、追加してください。こんな感じに。

  var camera;                                                                                                                                         
  function initCamera() {                                                        
    camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000 );    
    camera.up.x = 0; camera.up.y = 0; camera.up.z = 1;                          
    camera.position.set(1394, 1416, 854);                                      
    camera.lookAt({x:0, y:0, z:0 });  //ここ     
  }

camera.lookAtはカメラの視野の中心座標を指定します。
「OrbitControls.js」を使用中はlookAtは使えなくなるので、lookAt入りません。

今回は、コレで終わりでーす。
ありがとうございました!
次回はscene処理をやります!


前回   次回