Wonderfulで始めるAlternativa3D

初級編5.Coneで様々な形を作る

入門編3.プリミティブでも、少し解説したConeプリミティブですが、実はかなり使い勝手の良いプリミティブとなっています。

radialSegmentsの数を変更するだけで出来る多角形

ConeはbottomRadiusとtopRadiusを同じにする事で円柱となりますが、radialSegmentsの数を変更する事で以下のような多角形を簡単に作成できます。

			// プリミティブを作成します
			// Coneの第5引数(radialSegments)=3で三角
			var cone:Cone = new Cone(400,400,400,1,3);
			cone.setMaterialToSurface(new FillMaterial(0x6666CC),'side');
			cone.setMaterialToSurface(new FillMaterial(0x333399),'bottom');
			cone.setMaterialToSurface(new FillMaterial(0x9999FF),'top');

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

Adobe Flash Player を取得

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

Adobe Flash Player を取得

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

Adobe Flash Player を取得

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

Adobe Flash Player を取得

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

Adobe Flash Player を取得

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

Adobe Flash Player を取得

 

頂点Vertexを操作して、星型にする

Coneの頂点は、以下の式で作成されていますので、ちょっとした工夫で星型が作成できます。
x=Math.cos((360/radialSegments*i)*Math.PI/180)*bottomRadius
y=Math.sin((360/radialSegments*i)*Math.PI/180)*bottomRadius

			var cone = new Cone(200,50,50,1,11) 
			cone.setMaterialToSurface(new FillMaterial(0xCCCC33),'side'); 
			cone.setMaterialToSurface(new FillMaterial(0x666600),'bottom');
			cone.setMaterialToSurface(new FillMaterial(0xFFFF66),'top'); 
			template.scene.root.addChild(cone);


			var v1:Vertex; 
			var v2:Vertex; 
			var tx:Number; 
			var ty:Number; 
			var r:Number; 
			for (var i:uint=0;i<11;i++) { 
				v1=cone.getVertexById(i+'_'+0) 
				v2=cone.getVertexById(i+'_'+1) 
				if (i%2==0) { 
					r=200 
				} else { 
					r=400
				}
				tx=Math.cos((360/10*i)*Math.PI/180)*r 
				ty=Math.sin((360/10*i)*Math.PI/180)*r 
				v1.x=tx
				v1.y=ty
				v2.x=tx
				v2.y=ty

			}

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

Adobe Flash Player を取得


.src

一点、コツがありまして、星型を作成するには頂点数は上面で10個あれば出来るのですが、凸凹な図形を作成する場合、頂点数が偶数だと、面がうまく形成されない事があります。その為、頂点数は11個にして、始点(終点)で2つの頂点が重なるように作成しています。

 

ベベル面を作成してみる

上の星型を少し修正するだけで、ベベル面を作成する事もできます。

			var cone = new Cone(400,400,400,2,10) 
			cone.setMaterialToSurface(new FillMaterial(0x999933),'side'); 
			cone.setMaterialToSurface(new FillMaterial(0x666600),'bottom');
			cone.setMaterialToSurface(new FillMaterial(0xFFFF99),'top'); 
			template.scene.root.addChild(cone);


			var v1:Vertex; 
			var v2:Vertex; 
			var tx:Number; 
			var ty:Number; 
			var r:Number; 

			var surfaceArray:Array=[]
			for (var i:uint=0;i<10;i++) { 
				v1=cone.getVertexById(i+'_'+2) 
				v2=cone.getVertexById(i+'_'+1) 

				r=380
				tx=Math.cos((360/10*i)*Math.PI/180)*r 
				ty=Math.sin((360/10*i)*Math.PI/180)*r 
				v1.x=tx
				v1.y=ty
				v2.z=180
				surfaceArray.push(i+'_'+1)
			}

			cone.createSurface(surfaceArray,'bevel');
			cone.setMaterialToSurface(new FillMaterial(0xCCCC66),'bevel'); 

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

Adobe Flash Player を取得


.src
Coneの場合、サイド面が1つのSurface、「side」となっている為塗り分けが出来ません。
またheightSegments(高さの分割数)を増やしてもFaceが増えるだけで、Surfaceは「side」のままです。
なので、ベベルにあたる部分のFaceを別Surface「bevel」として新たに作成し、
それに別マテリアルを設定し色を変えています。

				surfaceArray.push(i+'_'+1)
			}

			cone.createSurface(surfaceArray,'bevel');
			cone.setMaterialToSurface(new FillMaterial(0xCCCC66),'bevel'); 

なお、createSurfaceについては、中級(メッシュ作成編)の「3.表面を作成する」で解説いたします。

 

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のグロー、ブラー