ＳＱＬの窓 イラストAC フリー素材
<< できる限りだれでも Three.js を楽しめる… | TOP | Three.js(r57) : THREE.Texture のプロパ… >>

2013年03月24日

Three.js の canvas_geometry_birds の『鳥』だけを取り出して考える

 


飛ばしている画像



こんな感じで以下で表示できます。

本来オリジナルで飛ばしているものは、８つの点からなるオブジェクトです。形は上から見ると以下のようになります。



この座標は x と z の座標軸で、通常の Three.js 空間で見たときは地面に対して平行な形です。実際の動きのアルゴリズムは良く解りませんのですが、動く際には必ずしも頭の方向が移動方向とは限らないようです。ただ、羽のはばたきは、この座標の２点を上下に動かして表現しています。(その位置の算出方法もまた良くわかりません)。ですから、この Bird オブジェクトのかわりに平面オブシェクトを使い、その上部の二点を同様に動かす事によって、飛翔する表現を自由に変更る事ができます。

飛翔する初音ミク

Bird の代わりに平面

	var image = new Image()
	image.onload = function () {

		texture = new THREE.Texture( this );
		texture.needsUpdate = true;
		material = new THREE.MeshBasicMaterial({map: texture, overdraw: true});
		material.side = 2

		for ( var i = 0; i < 200; i ++ ) {

			boid = boids[ i ] = new Boid();
			boid.position.x = Math.random() * 400 - 200;
			boid.position.y = Math.random() * 400 - 200;
			boid.position.z = Math.random() * 400 - 200;
			boid.velocity.x = Math.random() * 2 - 1;
			boid.velocity.y = Math.random() * 2 - 1;
			boid.velocity.z = Math.random() * 2 - 1;
			boid.setAvoidWalls( true );
			boid.setWorldSize( 500, 500, 400 );

			birds[ i ] = new THREE.Mesh( new THREE.PlaneGeometry(30, 30, 2, 1), material );
			bird = birds[ i ]
			bird.phase = Math.floor( Math.random() * 62.83 );
			bird.position = boids[ i ].position;
			scene.add( bird );

		}
		
	};
	image.src = "http://lh3.googleusercontent.com/-4Em5315jEAI/T_GVyEMF5BI/AAAAAAAAHBg/s78i3fY94vU/s60/Black_Eagle_Miku_Elf4.png";


後は、render の中の座標変更で x 軸を 90度 rotation して地面に対して平行にして、羽ばたく対象の頂点を設定します。

bird.geometry.vertices[ 0 ].z
bird.geometry.vertices[ 2 ].z
に、Math.sin( bird.phase ) * 15;

を設定していますが、15は係数で、オリジナルは 5 でしたが実行しながら調整しました。
【Three.jsの最新記事】
posted by at 2013-03-24 02:40 | Three.js | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa