Wonderfulで始めるAlternativa3D
Meshの構造と、各要素(Vertex、Face、Surface)へのアクセス方法が理解できたら、実際にMeshの頂点を修正して、Meshを変形させてみましょう。
いきなり、複雑な3Dモデルを弄るのは難しいので、最初はPlaneで練習してみます。
自分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'を下(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);
.src
x,y,z、coordsどちらを使用しても同じ操作ができます。
xyzのいずれかを操作する場合はxyzプロパティで、座標をPoint3Dで取得したい時や、まとめて設定したい時などは、coordsを利用するといいでしょう。
頂点操作の流れが理解できたら、次は、同じPlaneを利用した少し複雑な変形をしてみます。
まず用意するのは、縦に36分割したPlaneです。裏も使うのでreverse=trueにしています。
//板を作成 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 }
今回は、頂点に左から順番にアクセスする為、for each(~ in )を使わず、forでループさせ、三角関数を使い、奥(y=500)と手前(y=-500)の頂点を円にしています。
なおMathUtils.toRadian(angle:Number)は、alternativa.utilsパッケージの中にある、MathUtilsクラスのメソッドで、角度(Degree)をラジアン(Radian)に変更します。
(正直angle* Math.PI/180と書いちゃう方が短いのですが・・・一応ご紹介ということでw)
頂点操作のサンプルといて、Wonderflにもいくつか投稿してますので、参考にしてみてください。
(カメラ位置が違うので、操作するIDが若干違っていたり、まだご紹介していないTextureやSprite3D等も使用していますが、頂点操作の要領は一緒です。)
3. 頂点を操作する
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のグロー、ブラー