飛ばしている画像
こんな感じで以下で表示できます。
本来オリジナルで飛ばしているものは、8つの点からなるオブジェクトです。形は上から見ると以下のようになります。この座標は x と z の座標軸で、通常の Three.js 空間で見たときは地面に対して平行な形です。実際の動きのアルゴリズムは良く解りませんのですが、動く際には必ずしも頭の方向が移動方向とは限らないようです。ただ、羽のはばたきは、この座標の2点を上下に動かして表現しています。(その位置の算出方法もまた良くわかりません)。ですから、この 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の最新記事】
- r69 で再チェックしました / Three.js(r53) で追加された LineDashedMaterial のサンプルを簡素化して解りやすくしました
- Three.js(r69) : Lineメソッドで使用する頂点の配列を持つ Geometry オブジェクト
- Three.js : 好きな背景透過画像を飛翔させる
- Three.js : Vector3 オブジェクトのコンストラクタ / result = x || 0; という書き方
- Three.js : WebGL限定の Cube テクスチャによる『パノラマ背景』
- Three.js : 球を使った『パノラマ背景』
- ユーザ定義の THREE.UserCubes1 オブジェクトを使って、カメラでその周りを周回する
- Three.js : カメラが発射する Ray(光) にヒットするオブジェクトを総取りする
- Three.js の点線表示の詳細( 特に Windows で WebGL では線の太さは実装なし )
- Three.js でキューブの『テクスチャ面設定』とスケール・X軸回転を jQuery のスライダーでテストする
- Three.js の座標系の向きを テクスチャを貼りつけたキューブと jQuery のスライダー で確認する
- Three.js を使って DAZStudio でレンダリングした女性をちょっと湾曲した炎の前に立たす 〜 Three.js エフェクトの可能性
- Three.js 3Dゲームワールド(を夢見て)リアルサンプル
- Three.js の webgl_geometry_minecraft.html で使われている Cube World を使って、3D モデルを乗っけてカメラを動かすとかなりいい雰囲気です
- THREE.Scene クラスの remove メソッド
- Three.js の個別ソースを使った部分カスタマイズ
- Three.js : あるスケールでの平均した座標集合の作成