SQLの窓 イラストAC フリー素材

2013年03月04日

Three.js の名前空間でユーザオブジェクトを作って、Three.js の基本を再確認する


実行ページ

THREE.UserCubes1

ここで、ユーザオブジェクトとしているのは、複数のキューブをシーンに追加しているだけなので、それぞれのキューブの削除や操作は実装していません。極端に言えば単に記述場所を別にしただけですが、それでも本体はとても見やすくなっているはずです。

Three.js サンプルの一般的な構成

サンプルには、ステータス等動作に関係のないものがありますが、必要な基本部品は以下の4つになります。

❶ カメラ
❷ シーン
❸ レンダラー( 描画 )
❹ オブジェクト

オブジェクトは、実際目に見えるものでいろいろなパターンがありますが、それ以外は必ずカメラとシーンとレンダラーの三点セットとなっています。

init 関数で環境作成

この部分で、❶ 〜 ❹ を作成しますが、ここで描画が行われるわけではありません。この後、ループ処理に入って初めてアニメーションとして実装されます。

init 関数は名前はなんでもいいのですが、まずカメラを作成し、シーンを作成します。この二つのオブジェクトは単独で存在し、お互いの関係を計算して描画するのがレンダラーです。

そのレンダラーがレンダラーとしての役目を実行するのはループ処理の中であって、init 関数の中ではありません。ここでは、レンダラーは作成された後に、ブラウザの描画エリアへ登録されます。
document.getElementById("three_area").appendChild( renderer.domElement );
登録されただけでは描画はされず、この後アニメーションが必要無いのであれば、静止画として以下の二行を実行する事になります。
camera.lookAt( scene.position );
renderer.render( scene, camera );
実際表示されるのは、シーンに追加されたオブジェクトなので、第❹番目の要素として、init 関数では、シーンに対して追加して行く事になります。
requestAnimationFrame でループ処理 このメソッドは、Three.js では無く、DOM のメソッドです。このメソッドによって、次の描画時に呼ばれるメソッドを登録するのですが、一回描画する毎に自分自身を登録するので結果的にループ処理を実行する事になります ( IE9 にこのメソッドが無いので、Three.js は setTimeout で代用した関数を定義してくれています ) Microsoft と Mozilla のドキュメント requestAnimationFrame メソッド (Windows) window.requestAnimationFrame - DOM | MDN
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/three/three.min56.js"></script>
<div id="three_area" style='width:600px;height:500px;'></div>

<script type="text/javascript">
// WebGL チェック
//if( !( function () { try { return !! window.WebGLRenderingContext && !! //document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); } catch( e ) { return false; } } )() ) {
//	document.write("<span style='font-weight:bold;font-size:30px;'>WebGLが使用できません</span>");
//	document.getElementById("three_area").style.display = 'none';
//}

// Three.js の名前空間でオブジェクト作成
THREE.UserCubes1 = function ( scene, cubeSize, cubeNum, displaySpan ) {

	// キューブの基本サイズ( 見た目は後でスケールで変化する )
	this.cubeSize = ( cubeSize !== undefined ) ? cubeSize : 20;
	// キューブの数
	this.cubeNum = ( cubeNum !== undefined ) ? cubeNum : 100;
	// 表示幅( 発生させる座標の範囲の長さ )
	this.displaySpan = ( displaySpan !== undefined ) ? displaySpan : 800;

	this.geometry = new THREE.CubeGeometry( this.cubeSize, this.cubeSize, this.cubeSize );
	this.objects = [];

	for ( var i = 0; i < this.cubeNum; i ++ ) {

		var object = new THREE.Mesh(
			this.geometry,
			new THREE.MeshBasicMaterial( {
				color: Math.random() * 0xffffff,
				transparent: true,
				opacity: 0.5 }
			)
		);

		// 正座標に発生させて、原点に半分戻す
		object.position.x = Math.random() * this.displaySpan - this.displaySpan/2;
		object.position.y = Math.random() * this.displaySpan - this.displaySpan/2;
		object.position.z = Math.random() * this.displaySpan - this.displaySpan/2;

		object.scale.x = Math.random() * 2 + 1;
		object.scale.y = Math.random() * 2 + 1;
		object.scale.z = Math.random() * 2 + 1;

		// 向きを360度ランダム
		object.rotation.x = Math.random() * 2 * Math.PI;
		object.rotation.y = Math.random() * 2 * Math.PI;
		object.rotation.z = Math.random() * 2 * Math.PI;

		this.objects.push( object );
		scene.add( object );

	}

};


var w = 600;
var h = 500;

var camera, scene, renderer;

init();
animate();

function init() {

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

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

	// メインオブジェクト作成
	var UserCubes = new THREE.UserCubes1( scene );

	// レンダラー作成
	renderer = new THREE.CanvasRenderer();
	renderer.setSize( w, h );

	// 配置
	document.getElementById("three_area").appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );
	render();

}

var radius = 600;
var theta = 0;

function render() {

	theta += 0.1;

	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>

コメントの WebGL チェックは、レンダラーを WebGL に変更した時に使用します。


タグ:jquery javascript
posted by at 2013-03-04 19:55 | Three.js : ベーシック | このブログの読者になる | 更新情報をチェックする