プログラミング工房
TOP
Flex基本
開発環境 JavaScript連携 PHP連携1 PHP連携2(AMFPHP) ウィンドウ ボタンスキン 矩形スキン ローカルファイル(テキスト) F5等の対策 ローカルファイル(イメージ) ダウンロード、アップロード 1枚の画像のカラーを変更 時間のかかる計算処理 外部SWFの読込み
Flexで3D
Flexだけで3D Papervision3Dを使ってみる 3Dオブジェクト カメラ、前後判定の工夫しました 自由な形状を作成
Flexでクラス
Class1(白黒ゲームの盤) Class2(白黒ゲームのプレイヤー) Class3(プレイヤーを外部SWF)
PHP
共通関数1
Flexの作品
お問合せの説明 サンプルのソース表示の説明 分子構造の表示(PDBファイル) マンデルブロ集合の画像作成 swf参加型白黒ゲーム(Reversi) ストップウォッチ WEB素材
AIR
AIRを使ってみる ソースファイルのHTML変換を作る
etc.
マンデルブロ集合のギャラリー ジュリア集合のギャラリー wonderflを使ってみました お問合せ

Flexで3D-Papervision3Dを使ってみる

■2011.03.14:作成
サンプル サンプルのソース

Papervision3D(PV3D)の環境

Papervision3D(PV3D)と言う3Dに対応したライブラリがあるので使ってみる。

Papervision3Dは http://blog.papervision3d.org/ の右側のメニューの「Downloads」の
「.ZIP or .SWC」をクリックして「Papervision3D_2.x.xxx.swc」をダウンロードしてください。
ダウンロードしたSWCファイルはわかりやすい場所に置いて下さい。

「FlashDevelop」で新規、または既存のプロジェクトを開いたら、
プロジェクトの「lib」ディレクトリにダウンロードした「Papervision3D_2.x.xxx.swc」をおいて下さい。

Papervision3D(PV3D)の座標系


Papervision3D(PV3D)の座標系は以下の様になっています。
PV3D座標系
矢印の方向が正方向(+)で回転角度は度指定(90°等)です。
Flexで3D-Flexだけで3Dと違っていますので注意!

プログラムを作ってみる。

Flexで3D-Flexだけで3Dと同じようなプログラムを作ってみる。

まず「Main.mxml」ファイルにPV3Dのオブジェクトを配置する「mx:UIComponent」を配置する。
実際のPV3Dのオブジェクトは「3Dtest02.as」の方で配置します。
<s:Group width="100%" height="100%">
    <!-- 3D形状の配置 -->
    <mx:UIComponent id="base"/>   
</s:Group>

「3Dtest02.as」でPV3Dのオブジェクトを配置します。
「[Embed(source=・・・」で使用する画像を指定します。
「bv」(BasicView)と「rootNode」(DisplayObject3D)を配置
「rootNode」にPV3Dのオブジェクトを配置します。

「mkPlane関数」でPV3Dのオブジェクトを作成します。
  画像を貼り付けるための素材(Material)を定義します。
  「material.doubleSided = true;」で裏面の表示を指定。
    指定しないと裏面を表示しません。
  「Plane」で平面を作成します。(指定x,y,zは面の中心になります)
//3D形状の配置領域
private var bv:BasicView;
private var rootNode:DisplayObject3D;

//使用画像定義
[Embed(source='img/All0.png')]
    private var imgAll0:Class;
[Embed(source='img/X150.png')]
    private var imgX150:Class;
[Embed(source='img/Y150.png')]
    private var imgY150:Class;
[Embed(source='img/Z150.png')]
    private var imgZ150:Class;

//初期化
private function initDataSet():void {
    //3D形状の配置領域作成
    bv = new BasicView();
    base.addChild( bv );
    rootNode = new DisplayObject3D();
    bv.scene.addChild(rootNode);

    //3D形状(面)の配置
    rootNode.addChild(mkPlane(0,0,0,imgAll0));
    rootNode.addChild(mkPlane(150,0,0,imgX150));
    rootNode.addChild(mkPlane(0,150,0,imgY150));
    rootNode.addChild(mkPlane(0,0,150,imgZ150));

    //表示が小さいので2倍する
    rootNode.scale = 2.0;
    //回転角度の初期化
    onClear();
}
//3Dの面作成
// x,y,z;面の中央座標
// img:表示する画像
//戻り値:作成されたPlane
private function mkPlane(x:Number, y:Number, z:Number, img:Class):Plane {
    var objPlane:Plane;
    var material:BitmapMaterial = 
    		new BitmapMaterial((new img() as Bitmap).bitmapData);
    material.smooth = true;
    material.oneSide = true;
    material.interactive = true;
    material.doubleSided = true;  //裏表示
    objPlane = new Plane(material, 100, 100, 1, 1);
    objPlane.x = x;
    objPlane.y = y;
    objPlane.z = z;
    return objPlane;
}

回転角度(90°等)の指定は「rootNode」に対して行います。
「bv.renderer.renderScene」を実行しないと表示されません。
//Sliderの値変更:回転角度のセット、表示
private function onSlChng():void {
    rootNode.rotationX = sldRotationX.value;
    rootNode.rotationY = sldRotationY.value;
    rootNode.rotationZ = sldRotationZ.value;
    bv.renderer.renderScene( bv.scene , bv.camera , bv.viewport );
}

実行結果

画像(imgAll0)の中心(X=0,Y=0,Z=0)で回転します。
PV3D実行結果1

「rotationY」を90°以上にすると画像も裏面を表示し、「Z=150」の画像も手前に来ます。
(「material.doubleSided = true;」を指定しないと裏面になると表示しなくなります。) PV3D実行結果2

プログラミング工房