Wonderfulで始めるAlternativa3D

初級編1.Object3D

入門編では、ところどころでAlternativa3D上に設置されるオブジェクトを「3Dオブジェクト」と表現してきましたが、Alternativa3Dでは、それらすべてはalternativa.engine3d.coreパッケージObject3Dクラスを基本クラスとして作成されています。(Camera3D、各種Primitive等もすべて、Object3Dクラスが基本クラス)

このObject3Dクラスは、flash.DisplayObjectクラスのような物と言えばわかりやすいかも知れません。
flash.DisplayObjectが、「表示リストに含めることのできる全てのオブジェクトに関する基本クラス」であるのに対し、Object3Dクラスは「Alternativa3Dの表示リストに含めることが出来る全てのオブジェクトの基本クラス」となります。

Alternativa3D API DocのObject3Dクラスを見ると、flash.DisplayObjectでおなじみのプロパティやメソッドが並んでいます。なお、全ての、プロパティやメソッドを紹介すると、リファレンスマニュアルの日本語訳になってしまうだけなので、要点を絞って簡単に解説したいと思います。

Object3Dは空の箱

Object3Dの代表的なメソッドとして、addChild()、removeChild(), getChildByName()があります。
これらは、flash.DisplayObjectクラスの物と同じ意味合いの物ですが、それぞれChildとして登録できるのは同じObject3Dとそれを継承するクラスのみです。

プロパティを見ると、
入門編.4で紹介した、座標位置情報を設定保持するx,y,zやcoords
回転情報を設定保持するrotationX,rotationY,rotationZ,
拡大縮小情報を設定保持するscaleX、scaleY、scaleZ
等があります。
逆に、大きさを表す、width、heightはありませんし、alphaやvisibleもありません

これらの事から、Object3Dは位置、回転、拡大縮小が可能で、Object3Dをポイポイ入れ子にする事が出来る実体の無い空の箱・・・のような物と言えます。

Object3Dをネストして使う例

空のObject3DにObject3Dをネストして使う、具体的な例をいくつかご紹介します。

Object3DにBox(Object3D)をネストして、回転軸をずらす

Boxプリミティブは作成すると、回転の中心となる座標0,0,0がObjectの中心となっています。
もしこれを、箱の端にずらしたい場合など、Object3Dにネストする方法が楽です。
(「初級編3.頂点を操作する」でも可能になりますが、こっちが手っ取り早いです)

		//Object3Dに箱をネストして、中心点をずらす
		//空のObject3Dを作成する
		var obj:Object3D=new Object3D()
		obj.x=150
		//Sceneのrootに追加
		template.scene.root.addChild(obj)

		//ずらす箱を作成
		var material2:FillMaterial=new FillMaterial(0x000066);
		var box2:Box = new Box(50,50,200, 1, 1, 1, false, false);
		box2.cloneMaterialToAllSurfaces(material2);
		box2.x=100
		// Object3Dに追加
		obj.addChild(box2);
	

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

Adobe Flash Player を取得


.src

青い箱が座標をずらしているBoxです。

Object3DにCamera3D(Object3D)をネストして、撮影対象物の周りを回転させる

Camera3Dを撮影対象物の周りを回転させる場合にも、Object3Dにネストすることで
三角関数や行列計算などを行わなくても、簡単に出来てしまいます。

		//Cameraの位置を手前に動かす
		template.camera.coords=new Point3D(0,-500,0);

		//Cameraを配置する空のObject3Dを作成
		var obj:Object3D=new Object3D()
		obj.addChild(template.camera)
		template.scene.root.addChild(obj);
	

後は、objを回転させながら、CameraControlでlookAtさせるだけです。

			template.onPreRender = function():void {
				// カメラを回転させます (角度はラジアン)
				obj.rotationZ += 1 * Math.PI / 180;				
				// カメラの座標を中央に向かせる
				template.cameraContoller.lookAt(new Point3D());
			}
	

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

Adobe Flash Player を取得


.src

複雑な軌道計算等には不向きですが、簡単に回転させる場合等には便利です。

Object3Dを使って、複雑なモデルを作る

複雑な階層構造を持つモデルも、Object3Dをネストさせる事で簡単に作る事ができます。
(FlashなどでSpriteをネストさせて作る要領と同じです。)
ネタ元は、clockmakerさんの羽ばたく蝶です。
Wonderflでも、breakさんが、羽根の反転の修正として投稿してます。
・羽ばたく蝶々のテクスチャーが上下反転する問題を回避
ソースは少し長くなるので、下記のsrcでご確認ください。

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

Adobe Flash Player を取得


・src

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