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();
 
 });
 
})();