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

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/three69.min.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/Projector.js"></script>
<script type="text/javascript" src="http://winofsql.jp/js/three/renderers/CanvasRenderer.js"></script>

<div id="three_canvas_container"></div>

<script type="text/javascript">
var WIDTH = 600;
var HEIGHT = 600;
var renderer, scene, camera, stats;
var object;

$("#three_canvas_container")
	.css({
		width: WIDTH+"px",
		height: HEIGHT+"px"
	});


init();		// 仕様作成
animate();	// アニメーション開始

// ***********************************
// 描画仕様作成
// ***********************************
function init() {

	// 遠近法カメラ作成
	camera = new THREE.PerspectiveCamera(
		// 視野の上下角度
		40,
		// カメラビューのアスペクト比
		WIDTH / HEIGHT,
		// 表示可能な一番近い距離
		1,
		// 表示可能な一番遠い距離
		200
	);

	// 座標におけるカメラの位置
	camera.position.z = 150;

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

	// 一辺 50 のキューブの座標を作成	
	var geometryCube = cube( 50 );

	// ラインでキューブを作成	
	object = new THREE.Line(
		geometryCube,
		// 点線の仕様を決定
		new THREE.LineDashedMaterial( {
			color: 0xffaa00,
			dashSize: 3,
			gapSize: 1,
			linewidth: 2
		} ),
		// 二つの座標をペアとして使用する
		THREE.LinePieces
	);

	// シーンにオブジェクト(ラインで作成したキューブ)を追加	
	scene.add( object );

	// Canvas で描画します	
	renderer = new THREE.CanvasRenderer( );
	// 描画サイズの設定
	renderer.setSize( WIDTH, HEIGHT );
	// 描画領域の色を設定します
	renderer.setClearColor( 0x404040 );

	// 描画対象とする three_canvas_container に Three.js の
	// 描画システムを実装	
	var container = $( '#three_canvas_container' )[0];
	container.appendChild( renderer.domElement );

}

// ***********************************
// ラインによるキューブ作成
// ***********************************
function cube( size ) {
	
	var h = size * 0.5;
	
	var geometry = new THREE.Geometry();
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, -h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( -h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( -h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, h, h ) );
	
	geometry.vertices.push( new THREE.Vector3( h, -h, -h ) );
	geometry.vertices.push( new THREE.Vector3( h, -h, h ) );

	return geometry;

}


// ***********************************
// アニメーション用繰り返し処理
// ***********************************
function animate() {

	// アニメーション用のこの関数の再呼び出しの予約
	requestAnimationFrame( animate );

	// 描画
	render();

}

// ***********************************
// 実際の描画
// ***********************************
function render() {

	// アニメーション用の時間間隔
	var time = Date.now() * 0.001;

	// x 軸で回転
	object.rotation.x = 0.25 * time;
//	object.rotation.y = 0.25 * time;

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

}
</script>