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

表示したいオブジェクトのコードと、アニメーションの方法(この場合はカメラが周回する)を、Three.js の名前空間である THREE に定義して外部 JavaScript として参照して実行しています。また、ここはブログなので IFRAME にその内容を書き込んでいます。

THREE.UserCubes1 
THREE.UserPlay1 

Three.js のサンプルコードには、ピンからキリまであって、相当のプログラマでもさっぱり解らないものもあります。しかし、構成としては二つのパターンがあり、一つはその場でアニメーションや入力インターフェイスのイベントコードを全部書くものと、そのへんはコントロールクラスに任せてオブジェクトのみを書くものです。

他人が使うアプリならば、前者である必要がありますが、単にテストするだけならば後者が簡単です。ですが、後者もまだ外部のユーティリティレベルでおまけみたいなものなので、内容は中を読む必要があります。

ここでは、前者のほうを自前で切り取って、本体の部分の構成を明確にしています。結局は、カメラとシーンとレンダラーが基本で、表示するオブジェクトがあってはじめて静止画が可能になり、アニメーションループによって動きだします。

その、それぞれの役割が以下のソースでは明確になっているはずです。

<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" src="http://homepage2.nifty.com/lightbox/three/user_play1.js" charset="utf-8"></script>

<input type="text" id="radius" value="800" /><input type="button" value="半径変更" onclick='user_play.radius = eval(document.getElementById("radius").value);console.dir(user_play)' />
<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;
var user_play;

build_3d_world();

function build_3d_world() {

	// カメラ
	camera = new THREE.PerspectiveCamera( 70, w / h, 1, 10000 );
	// シーン
	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 );

	// アニメーション
	user_play = new THREE.UserPlay1( scene, camera, renderer, animate );
	user_play.start();

}
function animate() {

	requestAnimationFrame( animate );
	user_play.render();

}

</script>

ここで、THREE.UserCubes1 は、表示対象のオブジェクトの集合です。THREE.UserPlay1 は、アニメーションの方法をクラスで定義して、インスタンスで処理するようにしており、中の render メソッドに具体的な処理が書かれています。

その render メソッド内で使う変数が、THREE.UserPlay1 でインスタンスのプロパティとして定義されています。ループ処理は『仕様』上どうしてもグローバルに書く必要があるので外に出していますが、必要な処理は常に 2行です。
requestAnimationFrame( animate );
user_play.render();

render メソッドの中にバリエーションを作れば、アニメーション方法をプロパティやメソッドで変更できるように改造する事もできます。

それ以外はカメラは作るだけ。シーンも表示対象も作るだけです。レンダラーのみ、コンストラクタでサイズ指定できないので、メソッドを呼んでいます。そして、レンダラーだけでは表示できないので、表示可能なブラウザのエリアに登録します。
renderer.domElement を div へ追加

アニメーションの開始は、外部に定義した animate を呼び出せばいいのですが、整理上 UserPlay1 のメソッドして呼び出しています。

ボタンをクリックするとプロパティが変更されて、実行中のインスタンスの中でカメラと被写体との距離が変更されるようになっています。
半径 0 は、仕様で動作しません。半径 1 でシーンの中心にカメラが移動します。

x と z 軸の平面に対して、y 軸にも移動しているので、カメラの Far(10000) より少ない値で見えなくなります。

アニメーションは常に描画の繰り返しなので、変数の内容を変更するとたいていの状態変更が可能です( 中には、Three.js の内部にしか無いものがありますが、それは Three.js がまだまだ、ライブラリとして発展途上だからです )