Three.js 　TrackballControls.js（トラックボールコントロール）

今回は、Three.jsの「TrackballControls.js（トラックボールコントロール）」について書きます。

TrackballControls.js（トラックボールコントロール）は、マウスドラッグによる視点移動と、ホイールによるズームが可能になるクラスです。
簡単に言いますと、マウスで視点がグルグル回せるということです。
今回は、実際にやってみたほうが、分かりやすいと思います。

TrackballControlsは、Three.jsに記述されている標準クラスではなく、「TrackballControls.js」に書かれています。
ファイルの場所は、Three.jsダウンロードフォルダ内の

examples/js/controls/TrackballControls.js

にあります。
f:id:gupuru:20131214193706p:plain

では、TrackballControlsの読み込み方を書きます。
追加するのは、３つです。

①
通常のJavascriptファイルと同じやり方で読み込みます。

<script src="TrackballControls.js"></script>

②
カメラを生成している所に、コチラを追加してください。

//cameraはカメラオブジェクト     
//トラックボールオブジェクトの宣言                     
var controls = new THREE.TrackballControls(camera);

TrackballControlsのコンストラクタです。

TrackballControls(camera, domElement );

camera・・・camera系クラスのオブジェクト
domElement・・・マウス操作対象となるDOM要素。省力可能。省力した場合、ブラウザ全体がマウス操作の対象。

③
毎回の描画の直前でupdate()メソッドを呼びだします。

controls.update();

以上です。たったこれだけで、マウスドラッグによる視点移動と、ホイールによるズームが出来るようになります。
便利ですね（笑）
他にも、カメラ操作クラスがありますので、試してみる価値はあります。

最後に、青い球を表示するプログラムにTrackballControlsを追加した物を書いときます。

<!DOCTYPE html>
<html>
  <head>
    <title>introduction</title>
        <meta charset="utf-8">
          <script src="Three.js"></script>
           <script src="TrackballControls.js"></script>
            <link rel="stylesheet" type="text/css" href="fullscrean.css">
  </head>
        <body onload="threeStart();" , style="overflow: hidden;">
             <div id="canvas-frame"></div>
            <script>
            
  var width, height;                                                                 
  var renderer;                                                                      
  function initThree() {
    width = document.getElementById('canvas-frame').clientWidth;                   
    height =  document.getElementById('canvas-frame').clientHeight;              
    renderer = new THREE.WebGLRenderer({antialias: true});                       
    renderer.setSize(width, height);                                            
    document.getElementById('canvas-frame').appendChild(renderer.domElement);  
    renderer.shadowMapEnabled = true;                                         
  }

  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(0, 150, 400);                                      
    controls = new THREE.TrackballControls(camera); //追加           
   }
   
  var scene;
  function initScene() {    
    scene = new THREE.Scene();
  }
 
  var light, light2;                                                 
  function initLight() {                                            
    light = new THREE.DirectionalLight(0xcccccc,1.6);             
    light.position = new THREE.Vector3(-100, 150, 100);     
    light.castShadow = true;                                    
    scene.add(light);                                          
     
    light2 = new THREE.AmbientLight(0x333333); 
    light2.position.set( light.position.x,light.position.y,light.position.z );              
    scene.add(light2);                                      
  }
 
                                                 
  function initObject(){
    var cube = new THREE.Mesh(                                        
     new THREE.SphereGeometry( 100, 50, 50 ),                    
     new THREE.MeshPhongMaterial({                                      
               color: 0x00FF7
      }));
        
      scene.add(cube);      
    cube.position.set(0,30,0);                       
  }
   
    function loop(){  
        requestAnimationFrame(loop);
        controls.update();//追加  
        renderer.clear();   
        renderer.render(scene, camera);
    }
     
  function threeStart() {
    initThree(); 
    initCamera();
    initScene();    
    initLight();
    initObject();
    loop();     
  }
	        </script>
        </body>
</html>