Wonderfulで始めるAlternativa3D

初級編6.テクスチャー(画像)を使う

画像(BitmapData)をマテリアルとして使う場合は、使う画像をまずTextureクラスでTexture化し、それを使ってTextureMaterialにする必要があります。

Texture

alternativa.typesパッケージの中にあり、BitmapDataを3Dオブジェクトで使用するTextureとして記憶するクラスです。通常は以下の形で使用(インスタンス作成)します。
var texture:Texture = new Texture(BitmapData);

TextureMaterial

Textureクラスを使用したマテリアルです。
インスタンスの生成時に以下の引数を指定できます。なお、Textureは省略できません。
TextureMaterial(texture:Texture, alpha:Number = 1, repeat:Boolean = true, smooth:Boolean = false, blendMode:String, wireThickness:Number = -1, wireColor:uint = 0, precision:Number)

repeat:Boolean
画像をパターンとして繰り返し使うかどうかの指定です。UV設定とも関わりますので、そのままプリミティブで使っても効果は認識できません。

smooth:Boolean
画像の拡大縮小時に、スムーズ化するかどうかの指定です。

precision:Number
画像の画質を指定。alternativa.engine3d.materials.TextureMaterialPrecisionの定数を指定します。

alpha:Number、blendMode:String,、wireThickness:Number, wireColor:uint
他のマテリアルと同じ

使用例
var texture:Texture = new Texture(BitmapData);
var material:TextureMaterial=new TextureMaterial(texture);
または
var material:TextureMaterial=new TextureMaterial(new Texture(BitmapData));

 

画像を使ってサイコロを作成する

簡単な画像を作って、サイコロを作ってみます。

Flash APIを使用して、画像(Bitmapdata)を用意する。

			//BitmapData、Texture格納用の配列の作成
			var bitmapArray:Array=[];
			var textureArray:Array=[];
			var textureMaterialArray:Array=[];

			//お絵かき用のSpriteを用意する
			var canvas:Sprite=new Sprite()

			//サイコロ目1
			canvas.graphics.clear();
			canvas.graphics.beginFill(0xFCFCFC);
			canvas.graphics.drawRect(0,0,400,400);
			canvas.graphics.beginFill(0xFF0000);
			canvas.graphics.drawCircle(200, 200,80)
			bitmapArray.push(new BitmapData(400,400,true,0xFFFFFF));
			bitmapArray[0].draw(canvas)

なお、6つの面を作成するので今回はBitmapData、Texture、TextureMaterialのインスタンスを配列に格納しています。

BitmapDataをTextureとして登録する。

			//Textureを作成
			textureArray.push(new Texture(bitmapArray[0]));

なお、指定したBitmapDataは、参照としてTextureに保持されますので、BitmapDataを書き換えると、Textureも書き換わります。

Textureを使って、TextureMaterialを作成する。

			//TextureMaterialを作成
			textureMaterialArray.push(new TextureMaterial(textureArray[0],1,true,true));

			//残り5面を作成(上記の繰り返し~)			

 

TextureMaterialを、Surfaceに関連付ける。

			// プリミティブを作成します
			var box:Box = new Box(400,400,400,1,1,1);
			box.setMaterialToSurface(textureMaterialArray[0],'top');
			box.setMaterialToSurface(textureMaterialArray[1],'right');
			box.setMaterialToSurface(textureMaterialArray[2],'front');
			box.setMaterialToSurface(textureMaterialArray[3],'back');
			box.setMaterialToSurface(textureMaterialArray[4],'left');
			box.setMaterialToSurface(textureMaterialArray[5],'bottom');			

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

Adobe Flash Player を取得


.src

画像をパターンとして敷き詰める

TextureMaterialのコンストラクタの第3引数、repeat:Boolean=trueは、Textureをパターンとして、繰り返し敷き詰めると言うものですが、先にも書いたとおり、UVマッピングと関係があり、プリミティブ等に適用しても確認する事はできません。

UVマッピングについては、「中級(メッシュ作成編).4 UVを設定する」で解説しますが、今回はざっくりと、どうしたらパターンとして敷き詰められるかをご紹介します。

敷き詰める画像を用意する

			//BitmapData、Texture格納用の配列の作成
			var textureMaterialArray:Array=[];

			//お絵かき用のSpriteを用意する
			var canvas:Sprite=new Sprite()

			//小さなグラデーションを描画
			var colors:Array=new Array(0xFF0000,0x0000FF)
			var alphas:Array=new Array(1,1)
			var ratios:Array=new Array(0,255)
			var matrix:Matrix=new Matrix()
			matrix.createGradientBox(10,10,45*Math.PI/180,0,0)
			canvas.graphics.beginGradientFill(GradientType.LINEAR,colors, alphas, ratios, matrix)
			canvas.graphics.drawRect(0,0,10,10)

			var bmp:BitmapData=new BitmapData(10,10);
			bmp.draw(canvas)

今回はFlash APIで小さいグラデーション画像を用意します。

Texture、TextureMaterialを作成

			textureMaterialArray.push(new TextureMaterial(new Texture(bmp),1,true,true));
			textureMaterialArray.push(new TextureMaterial(new Texture(bmp),1,true,true));
			textureMaterialArray.push(new TextureMaterial(new Texture(bmp),1,false,true));

違いがわかるように同じ1枚のTextureから3枚のTextureMaterialを作成します。
1、2枚目はrepeat=true、3枚目はrepeat=falseです。

Planeを3枚作成し、TextureMaterialを'front'に貼り付ける

			// プリミティブを作成します
			var plane1:Plane = new Plane(200,200);
			plane1.setMaterialToSurface(textureMaterialArray[0],'front');

			var plane2:Plane = new Plane(200,200);
			plane2.setMaterialToSurface(textureMaterialArray[1],'front');

			var plane3:Plane = new Plane(200,200);
			plane3.setMaterialToSurface(textureMaterialArray[2],'front');

			template.scene.root.addChild(plane1);
			template.scene.root.addChild(plane2);
			template.scene.root.addChild(plane3);


Planeを3枚作成し、それぞれに先に作った3枚のTextureMaterialを’front’に割り付けます。

UVを修正する

			plane2.faces['front0_0'].aUV=new Point(0,0)
			plane2.faces['front0_0'].bUV=new Point(10,0)
			plane2.faces['front0_0'].cUV=new Point(10,10)

			plane3.faces['front0_0'].aUV=new Point(0,0)
			plane3.faces['front0_0'].bUV=new Point(10,0)
			plane3.faces['front0_0'].cUV=new Point(10,10)

2枚目、3枚目のPlaneのfaces['front0_0']にアクセスして、UVを修正します。
プリミティブのUVは通常、aUV=Point(0,0)、bUV=Point(1,0)、cUV=Point(1,1)となっていますので
これをaUV=Point(0,0)、bUV=Point(10,0)、cUV=Point(10,1)

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

Adobe Flash Player を取得


.src

2枚目が縦横10枚敷き詰められたのがわかりますね。
3枚目は、2枚目と同じ大きさのパターンが一枚だけで、後は最後の上右の1ピクセル分が伸ばされています。

 

外部から読みこんだデータを使う

もちろん、BitmapDataであればTextureは作成出来ますので、外部から読み込んだ画像を利用する事も可能です。

画像のloader部分は、他のライブラリ使う等色々方法はありますが、今回は他のライブラリを使わずにFlash APIのみで作成。もしWonderflで使用する場合は、画像URLを変更してください。Wonderflから他サイトにある画像をロードにはセキュリティサンドボックスが付きまといますので注意してください。

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

Adobe Flash Player を取得


.src

Cone、SphereにTextureMaterialを使用する

Coneや、SphereにTextureMaterialを使用する場合は、

 

 

一度貼り付けたTextureを後から変更する

 

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