新 3D クラス開発日記(15) ～ 面を使った 3D 表現<2> Wire ～
2007/02/26 22:23 - AS3.0
今回から面を使った 3D 表現を個別に説明します。
前に述べたとおり、面を使った 3D 表現は以下の 4 つです。
- Bitmap
- Surface
- Wire
- Zlight
これらは以下のとおりの同じ挙動をします。
- 面を構成する各頂点のスクリーン座標を取得
- その座標をアンカーとし、lineTo や beginFill の実行、Bitmap 貼付をおこなう
それゆえ各サンプルに見られるように、線が引かれるのは面の外周であり、色が塗られるのは面全体になります。
この挙動は render メソッドで定義していますが、Aq3D.skin パッケージ内の 4 クラスすべて、render という同じメソッド名をつけています。
これがポリモーフィズムの実践ってことでいいんですかね。
それでは単純なものから順に説明します。
Wire
ワイヤーフレーム形状の 3D 表現を実現します。
以下は render メソッドのコードです。
public function render( vp:Number ):void {
poligon.face.graphics.clear();…1
// 線描画
poligon.face.graphics.lineStyle( thickness , color , alpha );…2
sp.calculate( poligon.vertices[0].transCoordinate , vp );…3
poligon.face.graphics.moveTo( sp.x , sp.y );…4
for ( var idx:int in poligon.vertices ) {…5
sp.calculate( poligon.vertices[idx].transCoordinate , vp );…6
poligon.face.graphics.lineTo( sp.x , sp.y );…7
}
}
- 前回描画分クリア
- 線のスタイル設定
- 最初の頂点のスクリーン座標取得
- 最初の頂点の座標に moveTo
- 頂点の数だけループ
- スクリーン座標取得
- カレント頂点の座標に lineTo
なお、実際に線を引く行程である 5 の for ループ内を見てのとおり、面を構成する頂点は、隣り合うよう順番を設定する必要があります。
たとえば、四角形だと以下の図のように左上→右上→右下→左下と巡回する形になります。 これは面による表現すべてに共通する事項です。
|
線の太さ:1
線の色:0x000000 線のアルファ値:1 |
線の太さ:3
線の色:0xCC0000 線のアルファ値:1 |
- ソース（ wire.zip 24.1 KB ）
スポンサーサイト
