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

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

Three.js 視点の切り替え

今回は、Three.jsの「視点の切り替え方法」について書きます。


今回のやつは、例えて言うなら、キーボードの1を押すと物体を上から見る視点2を押すと物体を横から見る視点視点を切り替えられるというものです。


やり方は、とてもシンプルです。
コードを書いていきます。


カメラオブジェクトを2つ用意する。

//2つカメラオブジェクトを用意
var camera,top_camera;
//2つのカメラを切り替えるフラグ
var cameraActive = false;                                                                       
 
//1つ目のカメラオブジェクト     
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);   
scene.add(camera);  
 
//2つ目のカメラオブジェクト      
top_camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000);
scene.add(top_camera);      
top_camera.position.set(0, 0, 400);  


cameraActive の値で、レンダラーオブジェクトに入れるカメラオブジェクトを分ける。

if(!cameraActive){
   renderer.render(scene, camera);
}else{
   renderer.render(scene, top_camera);
}


キーボードでcameraActive の値を変える。(ここは、キーボードじゃなくもいいです。お好みの方法で!)

 window.addEventListener("keydown", function(e){
//Jkey 
 if(e.keyCode == 74){         
      cameraActive=true;
      }  
 
//SpaceKey     
if(e.keyCode == 32){                        
 cameraActive=false;
}   
 }, false);

これで、終わりです。

次に、上のコードを追加したプログラムを書きます。

<!DOCTYPE html>
<html>
  <head>
    <title>introduction</title>
        <meta charset="utf-8">
          <script src="three.min.js"></script>
          <script src="OrbitControls.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,top_camera;
  var cameraActive = false;                                                                       
  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);   
    scene.add(camera);  
    controls = new THREE.OrbitControls(camera);    
    
      top_camera = new THREE.PerspectiveCamera( 45 , width / height , 1 , 10000);
      scene.add(top_camera);      
       top_camera.position.set(0, 0, 400); 
 
  }
   
  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,0,100);   
    
     var plane =  new THREE.Mesh(                                      
             new THREE.PlaneGeometry(1000, 1000, 1, 1),
              new THREE.MeshLambertMaterial({ 
                color: 0x0000ff             
                }));                      

//シーンオブジェクトに追加
plane.reciveShadow = true;
scene.add(plane);                              
  }
  
   
    function loop(){  
        requestAnimationFrame(loop);
        controls.update();  
        renderer.clear();   
        if(!cameraActive){
        renderer.render(scene, camera);
        }else{
         renderer.render(scene, top_camera);
         }
        
    }
     
  function threeStart() {
    initThree(); 
    initScene();  
    initCamera();  
    initLight();
    initObject();
    loop();     
  }
  
   window.addEventListener("keydown", function(e){        
     if(e.keyCode == 74){           
      cameraActive=true;
      }  
      
     if(e.keyCode == 32){                            
     cameraActive=false;
      }       
 }, false);
	        </script>
        </body>
</html>

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

今回は、ちょっとした小技を書きました。


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

広告を非表示にする