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

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

Three.js FlyControls.js

今回は、Three.jsの「FlyControls.js」について書きます。


こちらは、マウスやキーボードで視点がグルグル回せる事ができるクラスです。
以前に紹介した、「OrbitControls.js」や「TrackballControls.js」と同じ分類です。
FlyControls.jsの特徴は、空を飛んでいるような視点です。マウスを長押しすると、前に進み、右や左の方にマウスを動かすと、その方向に視点が動きます。
また、キーボードのw,a,s,dを押すと、前後左右に視点を動かせます。


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


では、FlyControlsの読み込み方を書きます。

①「script src ・・・」で、FlyControls.jsを読み込みます。

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


②カメラオブジェクトを生成した後に、これらを追加してください。

//camera:カメラオブジェクトです。
var controls = new THREE.FlyControls(camera);     

//FlyControlsのプロパティです。こちらは、追加しといたほうが良いと思います。     
controls.movementSpeed = 1000;	//移動速度
controls.rollSpeed = Math.PI / 24;   //回転速度

//その他のプロパティ
controls.autoForward = false;         //true:自動で移動する,false:自動で移動しない
controls.dragToLook = false;        //true:ドラッグによる視点移動を禁止する,false:ドラッグによる視点移動をする


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

var clock = new THREE.Clock();    
var delta = clock.getDelta();  
controls.update(delta);  

以上です。これらを追加すると、マウスやキーボードで視点がグルグル回せる事ができるようになります。

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

<!DOCTYPE html>
<html>
  <head>
    <title>introduction</title>
        <meta charset="utf-8">
          <script src="three.min.js"></script>
          <script src="FlyControls.js"></script>
  </head>
        <body onload="threeStart();" , style="overflow: hidden;">
            <script>
            
  var width = 800, height = 600;                                                                 
  var renderer;                                                                      
  function initThree() { 
    renderer = new THREE.WebGLRenderer({antialias: true});                       
    renderer.setSize(width, height);               
    renderer.setClearColorHex(0xEEEEEE, 1);                             
    document.body.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.FlyControls(camera);   //追加        
    controls.movementSpeed = 1000;
	controls.rollSpeed = Math.PI / 24;
	controls.autoForward = false;
	controls.dragToLook = false;
   }
   
  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 sphere = new THREE.Mesh(                                        
     new THREE.SphereGeometry( 100, 50, 50 ),                    
     new THREE.MeshPhongMaterial({                                      
               color: 0x00FF7
      }));
        
      scene.add(sphere);      
    sphere.position.set(0,30,0);                       
  }
  
   var clock = new THREE.Clock(); 
    function loop(){  
     var delta = clock.getDelta();
        requestAnimationFrame(loop);
        controls.update(delta);//追加  
        renderer.clear();   
        renderer.render(scene, camera);
    }
     
  function threeStart() {
    initThree(); 
    initCamera();
    initScene();    
    initLight();
    initObject();
    loop();     
  }
	        </script>
        </body>
</html>

実行するとこんな感じです。
f:id:gupuru:20131220212427p:plain


これで終わりです。
ご不明な点などがありましたら、遠慮なくご質問ください。
ありがとうございました!