プログラミング工房
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-Flexだけで3D

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

Flexの3D対応を試してみる

Flexは3D対応しているので、まずはFlex4だけで3Dを試してみた。
(「Flex4だけ」とは3D関係のライブラリ等を使わない形です。)

座標系は以下の様になっています。
Flex 3D座標系
矢印の方向が正方向(+)で回転角度は度指定(90°等)です。

「mx:Canvas」を配置し、その中に画像を3枚配置しました。
もちろん3Dなので位置指定にZ値を指定います。
<!-- 3D形状(面)の配置 -->
<s:Group width="100%" height="100%">
    <mx:Canvas id="cvImge" width="300" height="300" 
            borderStyle="solid" x="400" y="280" z="0">
        <mx:Image id="Z150" source="@Embed('img/Z150.png')" 
            x="0" y="0" z="150" />
        <mx:Image id="All0" source="@Embed('img/All0.png')" 
            x="0" y="0" z="0" />
        <mx:Image id="X150" source="@Embed('img/X150.png')" 
            x="150" y="0" z="0" />
        <mx:Image id="Y150" source="@Embed('img/Y150.png')" 
            x="0" y="150" z="0" />
    </mx:Canvas>
</s:Group>

3個のSliderを用意して、それぞれX,Y,Zの回転角度(-180から180)を指定できる様にしました。
回転を指定する対象は各画像ではなく「mx:Canvas」に指定します。
//Sliderの値変更:回転角度のセット
private function onSlChng():void {
    cvImge.rotationX = sldRotationX.value;
    cvImge.rotationY = sldRotationY.value;
    cvImge.rotationZ = sldRotationZ.value;
}

実行結果

「mx:Canvas」の左上(0,0,0)を中心に回転しています。
画像もそれなりに変形し、奥の画像「Z=150」も小さくなっています。
(注意:「X=0」等は、わかりやすいように絵として画像上に描いています。)
3D実行結果1

「rotationY」を90°以上にすると画像も裏面を表示してくれます。
しかし、手前に来るはずの「Z=150」の画像は、他の画像の後ろに表示されたままです。
前後判定まではやってくれないようです。
3D実行結果2

1平面上に配置して3Dで回転するのには使えそうです。

プログラミング工房