GINPRO / SQLの窓と銀プログラマ

<script type="text/javascript">
// 主となるライブラリを複数回ロードしない
if ( window['loadThree'] !== true ) {
	window['loadThree'] = true;
	document.write("<"+"script type=\"text/javascript\" src=\"http://homepage2.nifty.com/lightbox/three/three.min56.js\"></"+"script>");
}
</script>
<!-- ユーザ定義オブジェクト -->
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/user_cubes1.js" charset="utf-8"></script>

<script type="text/javascript">

var w = 600;
var h = 500;

// 変数から表示エリアを作成
document.write("<div id=\"three_area\" style='width:"+w+"px;height:"+h+"px;'></div>");

// お決まり『三種の神器』
var camera, scene, renderer;

// 環境作成
init();

// ループ処理
animate();

// ****************************************************************
// 表示環境の準備( 開始は animate )
// ****************************************************************
function init() {

	// ********************************************************
	// 引数について : http://mrdoob.github.com/three.js/docs/56/#Reference/Cameras/PerspectiveCamera を参照、
	// 概念について : https://github.com/landongn/three.js-tutorials/tree/master/1 の画像を参照
	// FOV について : http://ja.wikipedia.org/wiki/%E7%94%BB%E8%A7%92 を参照
	// ********************************************************

	// カメラ作成
	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );

	// ********************************************************
	// http://mrdoob.github.com/three.js/docs/56/#Reference/Math/Vector3
	// x、y、z は結局 render で決定する
	// ********************************************************
	camera.position.set( 0, 0, 0 );

	// シーン作成
	scene = new THREE.Scene();

	// ********************************************************
	// メインオブジェクト作成
	// 初期値 : cubeSize:20, cubeNum:100, displaySpan:800
	// 1) キューブの基本サイズ( 見た目は後でスケールで変化する )
	// 2) キューブの数
	// 3) 表示幅( 発生させる座標の範囲の長さ )
	// ********************************************************
	var UserCubes = new THREE.UserCubes1( scene );

	// Canvas レンダラー作成
	renderer = new THREE.CanvasRenderer();
	// 表示を定義サイズと一致させる
	renderer.setSize( w, h );

	// ********************************************************
	// 指定した DOM 内に 3D 表示用の空間を作成する
	// ********************************************************
	document.getElementById("three_area").appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );
	render();

}

var radius = 600;
var theta = 0;

// ********************************************************
// 半径 600 で シーンの中心を周回する
// ********************************************************
function render() {

	theta += 0.1;

	// ************************************************
	// x が sin で、z が cos なので、周回軌道。(上から見たら半径600の円運動)
	// 但し、y は、その時の x の値と同じ値だけ上下
	// ( カメラから見たら、被写体が上に行ったり下に行ったりする )
	// ************************************************
	camera.position.x = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.y = radius * Math.sin( THREE.Math.degToRad( theta ) );
	camera.position.z = radius * Math.cos( THREE.Math.degToRad( theta ) );

	// カメラをシーンの中心に向ける
	camera.lookAt( scene.position );

	// 実際の描画
	renderer.render( scene, camera );

}

</script>