Wonderfulで始めるAlternativa3D

初級編3.Planeプリミティブ(Mesh)の頂点を操作する

Meshの構造と、各要素(Vertex、Face、Surface)へのアクセス方法が理解できたら、実際にMeshの頂点を修正して、Meshを変形させてみましょう。

いきなり、複雑な3Dモデルを弄るのは難しいので、最初はPlaneで練習してみます。

各頂点のIDを調べる

自分Vertexから作成したMeshなら、IDがわかる(はず)なので必要ない作業ですが、既成のプリミティブのの場合、最初はVertexにどのようなIDが振られているかを知る必要があります。
なので、前項で出たMesh.verticesを利用して、PlaneのVertexにはどんなIDが振られているか確認してみます。

下記サンプルは、trace情報を、textArea両方に出力しています。

			//板を作成
			var material:FillMaterial=new FillMaterial(0xCCCCCC,1,BlendMode.NORMAL,1,0x0000000);
			var plane:Plane = new Plane(1000,1000, 2, 2, false, false);
			plane.cloneMaterialToAllSurfaces(material);
			//Sceneのrootに追加
			template.scene.root.addChild(plane);
	
			for (var vname:String in plane.vertices) {
				trace(vname);
				dbg.appendText(vname+",");
			}
			
			//Meshが持っているVertexを返す
			for each(var vertex:Vertex in plane.vertices) {
				//traceでは、Vertex.toStringメソッドにより、Vertexの情報がStringで返ります。
				trace(vertex)
				dbg.appendText(vertex+"\n");
				
			}			
	

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src
右図のような構成になっているのがわかります。

頂点にアクセスし、移動する

ではVertexを移動してみましょう。
今回は、真ん中縦一列、Vertex ID:'1_2'、Vertex ID:'1_1'、Vertex ID:'1_0'を下(z方向)に移動してみます。

VertexにIDでアクセスする方法は、Mesh.verticesプロパティを使用する方法と、Mesh.getVertexById(id:Object)メソッドを利用する2つの方法があるので、両方で試してみます。

			plane.vertices['1_2'].z=-200;
			plane.getVertexById('1_1').z=-200;
			plane.getVertexById('1_0').coords=new Point3D(0,-500,-200);	
	

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src
x,y,z、coordsどちらを使用しても同じ操作ができます。
xyzのいずれかを操作する場合はxyzプロパティで、座標をPoint3Dで取得したい時や、まとめて設定したい時などは、coordsを利用するといいでしょう。

 

PlaneをTubeにしてしまう

頂点操作の流れが理解できたら、次は、同じPlaneを利用した少し複雑な変形をしてみます。
まず用意するのは、縦に36分割したPlaneです。裏も使うのでreverse=trueにしています。

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src

			//板を作成
			var material:FillMaterial=new FillMaterial(0xCCCCCC,1,BlendMode.NORMAL,1,0x0000000);
			var plane:Plane = new Plane(1000,1000, 36, 1, true, false);
			plane.cloneMaterialToAllSurfaces(material);
			//Sceneのrootに追加
			template.scene.root.addChild(plane);

			for(var i:uint=0;i<=36;i++) { 
				var vx:Number=Math.sin(MathUtils.toRadian(i*10))*200
				var vy:Number=Math.cos(MathUtils.toRadian(i*10))*200

				var id0:String=i+'_'+0
				var id1:String=i+'_'+1

				plane.getVertexById(id0).x=vx
				plane.getVertexById(id0).z=vy
				plane.getVertexById(id1).x=vx
				plane.getVertexById(id1).z=vy
			}
	

このページのコンテンツには、Adobe Flash Player の最新バージョンが必要です。

Adobe Flash Player を取得


.src

今回は、頂点に左から順番にアクセスする為、for each(~ in )を使わず、forでループさせ、三角関数を使い、奥(y=500)と手前(y=-500)の頂点を円にしています。
なおMathUtils.toRadian(angle:Number)は、alternativa.utilsパッケージの中にある、MathUtilsクラスのメソッドで、角度(Degree)をラジアン(Radian)に変更します。
(正直angle* Math.PI/180と書いちゃう方が短いのですが・・・一応ご紹介ということでw)

Wonderflに投稿してある、頂点操作のサンプル

頂点操作のサンプルといて、Wonderflにもいくつか投稿してますので、参考にしてみてください。
(カメラ位置が違うので、操作するIDが若干違っていたり、まだご紹介していないTextureやSprite3D等も使用していますが、頂点操作の要領は一緒です。)

 

 

 

 

 

Menu

入門編

初級編

7. Sprite3Dとは?

8. MovieClipMaterial

中級(インタラクティブ編)

1. インタラクティブなオブジェクト

2. 反応するモデルと反応しないモデル

3. サーフェースごとのマウスイベント

4. フェースごとのマウスイベント

中級(コントローラー編)

1. コントローラーとは?

2. コントローラーをカスタマイズ

3. 重力・衝突判定

4. LookAt

中級(カメラ&View編)

1. カメラZOOMとFOV

2. 複数のカメラとView

3. Viewのクリッピング

中級(メッシュ作成編)

1. 頂点を作成する

2. 面を作成する

3. 表面を作成する

4. UVを設定する

5. メッシュを作る

実践・応用編

1. 読み込んだ画像で絵本を作る

3. GoogleNexusOne

4. 3Dスロット

5. ルービックキューブ

実験編

1. 3dsの読み込みと操作

2. イラレで作ったpathを押し出す

3. 押し出しによるText3D

4. 自作のマテリアルクラスを作る

5. フラットシェーディングマテリアル

6. 衝突判定を利用した跳ね返り

7. Sprite3Dによるパーティクル表現

8. Sprite3Dでピクセルレンダー

9. Objectのグロー、ブラー