$(function(){
var camera, scene, renderer,
geometry, material, mesh, stats;
var w = 520;
var h = 390;
//カメラ位置角度
var cameraPos3 = new THREE.Vector3;
//カメラ移動先の位置角度
var cameraTarget3 = new THREE.Vector3;
//カメラ距離
var distance = 1000;
//カメラ移動角度
var angleCycle = 90;
//カメラ初期位置
cameraPos3.x = cameraTarget3.x = 45;
cameraPos3.y = cameraTarget3.y = 45;
cameraPos3.z = cameraTarget3.z = 45;
init();
animate();
function init() {
camera = new THREE.Camera( 75, w / h, 1, 10000 );
camera.position.z = distance;
scene = new THREE.Scene();
//Cubeの各面のマテリアル
var materials = [
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), // right
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), // left
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), //top
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), // bottom
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}), // back
new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture(\'images/texture001.png\')}) // front
];
/**
* Cubeのコンストラクタ引数は
* @param Number サイズ(X)
* @param Number サイズ(Y)
* @param Number サイズ(Z)
* @param Integer 分割数(X)
* @param Integer 分割数(Y)
* @param Integer 分割数(Z)
* @param Array マテリアルセット
* @param boolean 面の反転フラグ
* @param Object 各面の描画フラグ
*/
geometry = new THREE.Cube( 200, 200, 200, 4, 4, 4, materials);
material = new THREE.MeshFaceMaterial();
//一個だとカメラの動きがわかりにくいので複数置いてみる
mesh = [
new THREE.Mesh( geometry, material ),
new THREE.Mesh( geometry, material ),
new THREE.Mesh( geometry, material ),
new THREE.Mesh( geometry, material ),
new THREE.Mesh( geometry, material )
];
mesh[0].position.x = 200;
mesh[1].position.x = -200;
mesh[2].position.y = 200;
mesh[3].position.z = 200;
mesh[4].position.z = -200;
for(var i in mesh){
scene.addObject( mesh[i] );
}
renderer = new THREE.CanvasRenderer();
renderer.setSize( w, h );
$(\'#three-stage\').append( renderer.domElement );
//Stats SetUp
stats = new Stats();
stats.domElement.style.position = \'absolute\';
stats.domElement.style.top = \'0px\';
stats.domElement.style.zIndex = 100;
$(\'#three-stage\').append( stats.domElement );
/**
* キーイベント設定(カメラ回すイベント)
*/
$(document).bind(\'keydown\', keyDownHandler);
}
function keyDownHandler(e){
switch(e.keyCode){
case 37:
cameraTarget3.x += angleCycle;
cameraTarget3.z += angleCycle;
break;
case 39:
cameraTarget3.x -= angleCycle;
cameraTarget3.z -= angleCycle;
break;
default:
break;
}
}
function animate() {
// Include examples/js/RequestAnimationFrame.js for cross-browser compatibility.
requestAnimationFrame( animate );
render();
}
function render() {
//移動計算
cameraPos3.x += (cameraTarget3.x - cameraPos3.x) * 0.2;
cameraPos3.z += (cameraTarget3.z - cameraPos3.z) * 0.2;
//カメラを動かす
camera.position.x = distance * Math.sin( cameraPos3.x * Math.PI / 180 );
camera.position.y = distance * Math.tan( cameraPos3.y * Math.PI / 180 );
camera.position.z = distance * Math.cos( cameraPos3.z * Math.PI / 180 );
renderer.render( scene, camera );
//Stats update
stats.update();
}
});