Wonderfulで始めるAlternativa3D

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

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

いきなり、複雑な３Dモデルを弄るのは難しいので、最初は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");
				
			}			
	

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

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

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

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

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

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

PlaneをTubeにしてしまう

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

.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
			}
	

.src

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

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

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