document.write('
Data hosted with ♥ by Pastebin.com - Download Raw - See Original
  1. $(function(){
  2.     var camera, scene, renderer,
  3.     geometry, material, mesh, stats;
  4.  
  5.     var w = 520;
  6.     var h = 390;
  7.  
  8.     //カメラ位置角度
  9.     var cameraPos3 = new THREE.Vector3;
  10.     //カメラ移動先の位置角度
  11.     var cameraTarget3 = new THREE.Vector3;
  12.     //カメラ距離
  13.     var distance = 1000;
  14.     //カメラ移動角度
  15.     var angleCycle = 90;
  16.     //カメラ初期位置
  17.     cameraPos3.x = cameraTarget3.x = 45;
  18.     cameraPos3.y = cameraTarget3.y = 45;
  19.     cameraPos3.z = cameraTarget3.z = 45;
  20.  
  21.     init();
  22.     animate();
  23.  
  24.     function init() {
  25.  
  26.         camera = new THREE.Camera( 75, w / h, 1, 10000 );
  27.         camera.position.z = distance;
  28.  
  29.         scene = new THREE.Scene();
  30.  
  31.         //Cubeの各面のマテリアル
  32.         var materials = [
  33.             new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), // right
  34.             new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), // left
  35.             new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), //top
  36.             new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), // bottom
  37.             new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), // back
  38.             new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}) // front
  39.         ];
  40.         /**
  41.          * Cubeのコンストラクタ引数は
  42.          * @param Number サイズ(X)
  43.          * @param Number サイズ(Y)
  44.          * @param Number サイズ(Z)
  45.          * @param Integer 分割数(X)
  46.          * @param Integer 分割数(Y)
  47.          * @param Integer 分割数(Z)
  48.          * @param Array マテリアルセット
  49.          * @param boolean 面の反転フラグ
  50.          * @param Object 各面の描画フラグ
  51.          */
  52.         geometry = new THREE.Cube( 200, 200, 200, 4, 4, 4, materials);
  53.         material = new THREE.MeshFaceMaterial();
  54.  
  55.         //一個だとカメラの動きがわかりにくいので複数置いてみる
  56.         mesh = [
  57.             new THREE.Mesh( geometry, material ),
  58.             new THREE.Mesh( geometry, material ),
  59.             new THREE.Mesh( geometry, material ),
  60.             new THREE.Mesh( geometry, material ),
  61.             new THREE.Mesh( geometry, material )
  62.         ];
  63.         mesh[0].position.x = 200;
  64.         mesh[1].position.x = -200;
  65.         mesh[2].position.y = 200;
  66.         mesh[3].position.z = 200;
  67.         mesh[4].position.z = -200;
  68.         for(var i in mesh){
  69.             scene.addObject( mesh[i] );
  70.         }
  71.  
  72.         renderer = new THREE.CanvasRenderer();
  73.         renderer.setSize( w, h );
  74.  
  75.         $(\'#three-stage\').append( renderer.domElement );
  76.  
  77.         //Stats SetUp
  78.         stats = new Stats();
  79.         stats.domElement.style.position = \'absolute\';
  80.         stats.domElement.style.top = \'0px\';
  81.         stats.domElement.style.zIndex = 100;
  82.         $(\'#three-stage\').append( stats.domElement );
  83.  
  84.  
  85.         /**
  86.          * キーイベント設定(カメラ回すイベント)
  87.          */
  88.         $(document).bind(\'keydown\', keyDownHandler);
  89.  
  90.     }
  91.  
  92.     function keyDownHandler(e){
  93.         switch(e.keyCode){
  94.             case 37:
  95.                 cameraTarget3.x += angleCycle;
  96.                 cameraTarget3.z += angleCycle;
  97.                 break;
  98.             case 39:
  99.                 cameraTarget3.x -= angleCycle;
  100.                 cameraTarget3.z -= angleCycle;
  101.                 break;
  102.             default:
  103.                 break;
  104.         }
  105.     }
  106.  
  107.     function animate() {
  108.  
  109.         // Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
  110.         requestAnimationFrame( animate );
  111.         render();
  112.  
  113.     }
  114.  
  115.     function render() {
  116.         //移動計算
  117.         cameraPos3.x += (cameraTarget3.x - cameraPos3.x) * 0.2;
  118.         cameraPos3.z += (cameraTarget3.z - cameraPos3.z) * 0.2;
  119.  
  120.         //カメラを動かす
  121.         camera.position.x = distance * Math.sin( cameraPos3.x * Math.PI / 180 );
  122.         camera.position.y = distance * Math.tan( cameraPos3.y * Math.PI / 180 );
  123.         camera.position.z = distance * Math.cos( cameraPos3.z * Math.PI / 180 );
  124.  
  125.         renderer.render( scene, camera );
  126.  
  127.         //Stats update
  128.         stats.update();
  129.     }
  130. });
');