３Dを描画する（7）〜キューブ体を動かす2

サーバー上の画像を読み込んで、立方体を動かしてみましょう。

このやり方だと画像をサーバー上で読み込みますので、プログラムが苦手なweb担当者でも気軽に立方体の画像を変更することができます。難点は画像を読み込む間に立方体が黒く表示されることがあるかもしれない事です。

説明はいいからやり方を教えろという方向けの手順です。

1. CubePic.asファイルをダウンロードしてFlashDevelopなどに取り込みます。
2. FlashDevelopの場合asファイルはsrcフォルダに入れます。またsrcフォルダにはPV3Dから持って来たnochumpフォルダと orgフォルダも入れておきます。
3. 書き出しサイズは315x250pxとします。FlashDevelopではメニューのプロジェクトからプロジェクトの設定で行います。
4. binフォルダーの中にimagesフォルダを作成してimg0.jpgからimg5.jpgの画像ファイル６枚を入れてください。Embedを使用する場合はsrcフォルダに入れましたが今度はbinフォルダです。間違わないようにしましょう。
5. コンパイルするとbinフォルダにswf拡張子のファイルができています。これがFlashファイルです。binフォルダに入っているファイルとフォルダをそのままサーバーの目的のフォルダににアップします。
6. 画像を変更する場合はサーバーにアップしたimagesフォルダ内のimg0.jpgからimg5.jpgまでの画像を希望の画像に上書きします。必ずファイル名はimg0.jpgからimg5.jpgまでの画像を使用します。サーバー上の画像ファイルとswfファイルとhtmlファイルは必ずbinフォルダ内と同じ階層構造にします。そうしないと画像が正しく表示されません。

立方体を動かすソース

package {

    import flash.display.*;
    import flash.events.*;
    import flash.utils.*;
    import org.papervision3d.cameras.*;
    import org.papervision3d.core.effects.view.ReflectionView;
    import org.papervision3d.materials.*;
    import org.papervision3d.materials.utils.MaterialsList;
    import org.papervision3d.objects.*;
    import org.papervision3d.objects.primitives.*;

    public class CubePic extends ReflectionView {                       
        private var cube:Cube;
        public function CubePic() {
            cube = createCube();
            scene.addChild(cube);
            camera.y = 600;
            addEventListener(Event.ENTER_FRAME, onMove);
            }

        private function createCube():Cube {
            var materialsList:MaterialsList = new MaterialsList();
            var imgArr:Array = new Array();
            for (var i:int = 0; i < 6; i++) {
                imgArr[i] = new BitmapFileMaterial('images/img'+i+'.jpg');
            }           
            var faceArr:Array = ['front', 'back', 'top', 'bottom', 'right', 'left'];
            for (var j:int = 0; j < imgArr.length; j++ ) {
                var bitmap:BitmapFileMaterial = imgArr[j];
                bitmap.smooth = true;
                materialsList.addMaterial(bitmap, faceArr[j]);
                }
            cube = new Cube(materialsList, 120, 120, 120, 1, 1, 1);
            return cube;
        }

        private function onMove(e:Event):void {
            cube.yaw((200 - mouseX ) / 14);
            cube.pitch((200 - mouseY ) / 14);
            cube.y = Math.sin(getTimer() / 300) * -25 + 240;
            camera.x = 50 * Math.sin(getTimer() / 4000);
            camera.z = 50 * Math.cos(getTimer() / 4000);
            startRendering();
        }
    }
}

ここから文法の説明です。

ソースについて

createMyCubeメソッドの定義

createMyCubeメソッドはCubeクラスをインスタンス化するための処理をメソッドにしてまとめたものです。createMyCubeメソッドの中身が前回のEmbedを使用したものと変わるだけです。他のソースは変更する必要がありません。

1. MaterialsListをインスタンス化。MaterialsListとはキューブ体をインスタンス化する際に必要になる各側面のテクスチャーをリスト化するクラスです。
2. 画像のクラスを配列にする
3. for文で画像の配列をインスタンス化し、BitmapFileMaterialクラスをインスタンス化して画像をロードする。それを配列に代入しています。「３Dを描画する（4）〜カスタムクラス作成／画像の貼付け」で行った画像の張り付けを配列とfor文を使って処理しています。
4. 各面を配列として格納します。
5. BitmapFileMaterial型の変数に画像を代入します。
6. addMaterialメソッドでmaterialsListに画像データを追加します
7. materialsListを第1引数に入れてCubeクラスをインスタンス化します。

        private function createCube():Cube {
            var materialsList:MaterialsList = new MaterialsList();//--------------(1)
            var imgArr:Array = new Array();//-------------------------------(2)
            for (var i:int = 0; i < 6; i++) {
                imgArr[i] = new BitmapFileMaterial('images/img'+i+'.jpg');//-------(3)
            }           
            var faceArr:Array = ['front', 'back', 'top', 'bottom', 'right', 'left'];//------(4)
            for (var j:int = 0; j < imgArr.length; j++ ) {
                var bitmap:BitmapFileMaterial = imgArr[j];//---------------------(5)
                bitmap.smooth = true;
                materialsList.addMaterial(bitmap, faceArr[j]);//-------------------(6)
                }
            cube = new Cube(materialsList, 120, 120, 120, 1, 1, 1);//------------(7)
            return cube;
        }

次はHTML5とCSS3そしてJavaScriptに取り組みたいと思います。比較的簡単な内容から入るつもりです。ActionScriptについては機会をみて補填していきます。

ソースサンプルはこちらから右クリックでダウンロード

出来上がりサンプルはこちらから右クリックでダウンロード

＜author Tahara＞

もしよろしければ、下ボタンをクリックお願いします。