Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $(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();
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement