プログラミング工房
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-3Dオブジェクト

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

3Dオブジェクト

Flexで3D-Papervision3Dを使ってみる と同じプログラムを使用して、配置するものだけ変えて地面と建物の様な形状を作りました。

まず立体的に見えるように光源を定義します。(定義した光源は奥左上です。)
    //光源
    light = new PointLight3D();
    light.x = -1000;
    light.y = 1000;
    light.z = 1000;
    //3D形状の配置
    rootNode.addChild(mkGround(0xaaffaa, 0x668866));
    rootNode.addChild(mkBldg(300, 370, 120, 150, 200, 0, 0xffffff, 0x888888));
              :
    rootNode.addChild(mkTower( -200, 250, 50, 634, 0xffaaaa, 0x886666));
    rootNode.addChild(mkRoundBldg( -300, -300, 100, 150, 150,
                                   0xaaaaff, 0x666688));
    //回転角度の初期化
    onClear();

地面をPlane(平面)で作成して見ました。

まずMaterial(材質)を定義します。
Flexで3D-Papervision3Dを使ってみる ではMaterialには画像を使用しています。
今回は以下の2組のMaterialを組み合わせたもの(CompositeMaterial)を使用します。
 FlatShadeMaterial:光源を考慮したしています。
 WireframeMaterial:ワイヤーフレーム

平面を1000X1000のサイズで分割数5X5で配置します。
PlaneをX軸に90度回転(rotationX)させることで地面(水平)になります。
//地面作成
//cl1,cl2:明るい場所、暗い場所の色
private function mkGround(cl1:uint, cl2:uint):Plane {
    var objPlane:Plane;
    var compoMat:CompositeMaterial = new CompositeMaterial();
    var matShade:FlatShadeMaterial = new FlatShadeMaterial(light, cl1, cl2);
    var matWire:WireframeMaterial = new WireframeMaterial( 0x000000, 0.2);
    compoMat.addMaterial(matShade);
    compoMat.addMaterial(matWire);
    compoMat.doubleSided = true;  //裏表示
    objPlane = new Plane(compoMat, 1000, 1000, 5, 5);
    objPlane.x = 0;
    objPlane.z = 0;
    objPlane.y = 0;   //地面位置
    objPlane.rotationX = 90;    //面を水平に配置
    return objPlane;
}

建物をCube(立方体)で配置してみました。
 MaterialsListで立方体の6面の材質を指定します。(今回は6面同じMaterialを使用)
 位置指定は立方体の中央を指定しているので「y = (h/2.0);」とします。
 Y軸で回転する(rotationY)ことにより建物の向きを変えることが出来ます。
//建物
//x,y:建物の中心位置
//w,d,h:建物の幅、奥行き、高さ
//ang:建物の向き(反時計回り、角度)
//cl1,cl2:明るい場所、暗い場所の色
private function mkBldg(x:Number, y:Number, w:Number, d:Number, h:Number,
          ang:Number, cl1:uint, cl2:uint):Cube {
    var objCube:Cube;
    var compoMat:CompositeMaterial = new CompositeMaterial();
    var matShade:FlatShadeMaterial = new FlatShadeMaterial(light, cl1, cl2);
    var matWire:WireframeMaterial = new WireframeMaterial( 0x000000, 0.2);
    compoMat.addMaterial(matShade);
    compoMat.addMaterial(matWire);
    objCube = new Cube(new MaterialsList({all : compoMat}), w, d, h, 1, 5,1);
    objCube.x = x;
    objCube.z = y;
    objCube.y = (h/2.0);
    objCube.rotationY = -ang; //時計回りで回転
    return objCube;
}

塔をCone(円錐)で試してみました。
//塔
//x,y:塔の中心位置
//r1,r2:底面の半径
//h:塔の高さ
//cl1,cl2:明るい場所、暗い場所の色
private function mkTower(x:Number,y:Number,r:Number,h:Number,
                 cl1:uint, cl2:uint):Cone {
    var objCone:Cone;
    var compoMat:CompositeMaterial = new CompositeMaterial();
    var matShade:FlatShadeMaterial = new FlatShadeMaterial(light, cl1, cl2);
    var matWire:WireframeMaterial = new WireframeMaterial( 0x000000, 0.2);
    compoMat.addMaterial(matShade);
    compoMat.addMaterial(matWire);
    objCone = new Cone(compoMat, r, h,  10, 10);
    objCone.x = x;
    objCone.z = y;
    objCone.y = (h/2.0);
    return objCone;
}

円形の建物をCylinder(円柱)で試してみました。
 底面、天井の半径を指定します。
//円形の建物
//x,y:建物の中心位置
//r1,r2:底面、天井の半径
//h:建物の高さ
//cl1,cl2:明るい場所、暗い場所の色
private function mkRoundBldg(x:Number, y:Number, r1:Number, r2:Number, h:Number,
            cl1:uint, cl2:uint):Cylinder {
    var objCylinder:Cylinder;
    var compoMat:CompositeMaterial = new CompositeMaterial();
    var matShade:FlatShadeMaterial = new FlatShadeMaterial(light, cl1, cl2);
    var matWire:WireframeMaterial = new WireframeMaterial( 0x000000, 0.2);
    compoMat.addMaterial(matShade);
    compoMat.addMaterial(matWire);
    objCylinder = new Cylinder(compoMat, r1, h,  10, 10,r2);
    objCylinder.x = x;
    objCylinder.z = y;
    objCylinder.y = (h/2.0);
    return objCylinder;
}

サンプル以外にも以下のような3Dオブジェクトがあります。
 Sphere:3Dオブジェクトの球体
 Arrow:3Dオブジェクトの矢印
 PaperPlane:3Dオブジェクトの紙飛行機

実行結果

地面と建物の境の部分の表示(前後判定)がうまくいきません。
地面の分割数を大きくしても、このような例ではうまくいきません。
3Dオブジェクト実行結果

プログラミング工房