2013年7月29日月曜日

three.js


three.jsを最近やってます.

・簡単に何が出来るか・・・
HTMLで3Dのプログラムが書けるjavascriptのライブラリです.
3Dは見てたら酔っちゃうので,嫌いなんですが技術は好きなのでやり始めました.

・つまづき
実際,様々なwebページを見ればsampleがあるのでテストとして動かそうとしたら,Google Chromeで「XMLHttpRequest cannot load (ローカルファイル)」というエラーがでてきました.
ローカルファイルでAjaxで通信しようとしたらでるエラーみたいです.


Google Chromeの「プロパティ」「リンク先」の最後に「--allow-file-access-from-files」をつけてChromeを再起動したら,エラーは消えます.


・3Dのプログラムについて

最低限必要なもの

material 3Dにする物体
scene   物体を貼り付ける
camera  視点
light   光源
renderer 表示するプログラム


もちろんキーボードイベントなども使えるし,光源の光の調節や視点も移動できるのでおもしろいプログラムがかけます.

さまざまなサイトがあるので使い方はそちらで確認してください.
最後にこの前書き始めたプログラムを載せます.

物体が一つあり,operateオブジェクトにより十字キーで視点が移動できるプログラムです.
楽しいと思うので是非!


(function(){
 var width = $(window).width();
 var height = $(window).height();
 var radian = Math.PI/180;

 var x =100;
 var y =100;
 var z =-400;
 var camera   = new THREE.PerspectiveCamera(40, width / height, 1, 1000); // カメラ作成。画角40、距離1?1000の部分を表示できる。
   
 var scene    = new THREE.Scene(); // シーン作成
 var renderer = new THREE.WebGLRenderer(); // レンダラ作成
   
 var KEY_CODE = {
  ENTER: 13,
  UP: 38,
  DOWN: 40,
  LEFT: 37,
  RIGHT:39,
  HIDARITE:191,
  MIGITE:226,
  BACKSPACE: 8,
  SHIFT: 16,
  TAB: 9,
  T:84,
  R:82
 }; 
 var okomeum = {
  init :function(mesh){

   camera.position.set(x, y, z); // カメラの位置はz軸の-400
   camera.position.z = 500;

   
   // sceneの後
   var light = new THREE.AmbientLight( 0xffffff );  // 真っ白を1として
   scene.add( light );
   
   renderer.setSize(width, height);
   
   function render(){
    renderer.render(scene, camera);
   }
   window.onload = function(){
    document.getElementById('canvas-wrapper').appendChild(renderer.domElement);
    render();
   }
   okomeum.square();
   okomeum.operate();
  },
  square :function(){
   var geometry = new THREE.CubeGeometry(100, 100, 100); //ジオメトリー(座標)x,y,z
   //ランバード反射行うマテリアル(表面)
   var material = new THREE.MeshLambertMaterial({
    color:0xffffaa,
    map: THREE.ImageUtils.loadTexture('./okome.jpg')
   });
   var mesh     = new THREE.Mesh(geometry, material); // 立方体と材質を結びつけてメッシュ(オブジェクト)作成
   scene.add(mesh);
  },
  operate :function(){
   $('html').keydown(function(e){
   
   switch(e.which){
    
    case KEY_CODE.RIGHT: // Key[→]
     camera.position.x += 5;
     renderer.render( scene, camera );
     break;
    
    case KEY_CODE.LEFT: // Key[←]
     camera.position.x -= 5;
     renderer.render( scene, camera );
     break;
     
    case KEY_CODE.UP: // Key[↑]
     camera.position.z -= 5;
     renderer.render( scene, camera );
     break;
     
    case KEY_CODE.DOWN: // Key[↓]
     camera.position.z += 5;
     renderer.render( scene, camera );
     break;
    case KEY_CODE.HIDARITE:
     camera.position.y += 5;
     renderer.render( scene, camera );
     break;
    case KEY_CODE.MIGITE:
     camera.position.y -= 5;
     renderer.render( scene, camera );
     break;
    case KEY_CODE.T: 
     camera.rotation.y -= 0.1;
     renderer.render( scene, camera );
     break;
    case KEY_CODE.R: 
     camera.rotation.y += 0.1;
     renderer.render( scene, camera );
     break;
   }
  });
  }
 };

    $(document).ready(function(){
 okomeum.init();
 
 });
 
})();


0 件のコメント:

コメントを投稿