CX's Hatena Blog

はてなブログを使ってみるテスト

Flash 版 Away3D で地球を回してみるテスト

帰ってきた「○○ で地球を回してみる」シリーズ。

先日、JavaScript 版の Away3D を試しましたが、今回は、本家 Flash 版の Away3D を試してみたいと思います。

今回日程 シリーズ構成言語
1日目OpenGL で地球を回してみるテスト C/C++
2日目DirectX で地球を回してみるテスト C/C++
3日目Java 3D で地球を回してみるテスト Java
4日目WebGL で地球を回してみるテスト JavaScript
5日目Three.js で地球を回してみるテスト JavaScript
6日目Babylon.js で地球を回してみるテスト JavaScript
7日目gl.enchant.js で地球を回してみるテストJavaScript
8日目PhiloGL で地球を回してみるテスト JavaScript
9日目CubicVR.js で地球を回してみるテスト JavaScript
最終日Away3D で地球を回してみるテストJavaScript
追加+1Flash 版 Away3D で地球を回してみるテストActionScript
追加+2WPF で地球を回してみるテストC# + XAML
追加+3JavaFX 3D で地球を回してみるテストJava

f:id:cx20:20140202174521j:plain

0. 事前準備

以下の開発環境とライブラリを用意します。

なお、FlashDevelop のインストール方法については

■ FlashDevelop をインストールしてみる - CX's Hatena Blog

http://cx20.hatenablog.com/entry/2014/02/02/024403

を、参照頂ければと思います。

1. FlashDevelop を起動する

f:id:cx20:20140202184013p:plain

2. プロジェクトを作成する

[プロジェクト] - [新規プロジェクト] にてプロジェクトを作成します。

プロジェクトの種類は「AS3 Project」、プロジェクト名は「earth」としておきます。

f:id:cx20:20140202175835p:plain

3. プロジェクトフォルダにライブラリを追加する

Github よりダウンロードしたライブラリを解凍し

f:id:cx20:20140202180652p:plain

src 配下をプロジェクトのフォルダにコピーします。

f:id:cx20:20140202180835p:plain

f:id:cx20:20140202180836p:plain

コピーが完了すると、FlashDevelop にてフォルダが追加されたことを確認できます。

4. プロジェクトフォルダにテクスチャファイルを追加する

テクスチャ画像ファイル「earth.jpg」(1024x512)をプロジェクトフォルダにコピーします。

f:id:cx20:20140120002054p:plain

5. プロジェクトの設定を変更する

既定だと Flash Player のバージョンが「10.x」になっていますが、Away3D を用いる場合は「11.x」に変更します。

f:id:cx20:20140202180837p:plain

6. ソースを修正する。

  • Main.as
package
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.display.StageScaleMode;
    import flash.display.StageAlign;
    import away3d.containers.View3D;
    import away3d.entities.Mesh;
    import away3d.materials.TextureMaterial
    import away3d.textures.BitmapTexture;
    import away3d.textures.Texture2DBase;
    import away3d.primitives.SphereGeometry;

    public class Main extends Sprite
    {
        [Embed(source="earth.jpg")]
        private var assetEarth:Class;
        private var view3d:View3D;
        private var mesh:Mesh;

        public function Main():void
        {
            init();
        }
        
        private function init():void
        {
            view3d = new View3D();
            addChild(view3d);
    
            var ts:Texture2DBase = new BitmapTexture(new assetEarth().bitmapData);
            var material:TextureMaterial = new TextureMaterial(ts);
            var geometry:SphereGeometry = new SphereGeometry(450,450,100);
            mesh = new Mesh(geometry, material);
            view3d.scene.addChild(mesh);

            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
            stage.addEventListener(Event.RESIZE, onStageResize);
            this.addEventListener(Event.ENTER_FRAME, handleEnterFrame, false, 0, true);
        }

        private function onStageResize(event:Event):void
        {
            view3d.width = stage.stageWidth;
            view3d.height = stage.stageHeight;
        }

        private function handleEnterFrame(event:Event):void
        {
            mesh.rotationY -= 0.5;
            view3d.render();
        }
    }
}

JavaScript 版と比べると、3D のロジック部分は、ほぼ同等のコードであることが分かります。

7. 実行してみる

「F5」でコンパイル&実行されます。(ちなみに、[Ctrl]+[Enter] でデバッグ実行になります。)

f:id:cx20:20140202174521j:plain

地球が回れば成功です。

8. Wonderfl.net で実行してみる。

せっかくなので、Flash 投稿サイト「Wonderfl.net」にアップしてみたいと思います。

Away3D で地球を回してみるテスト - wonderfl build flash online

なお、Wonderfl.net にアップしたコードは、組み込みリソースが利用できない為、テクスチャの読み込み処理を手直ししています。

参考情報

away3d/away3d-core-fp11 - GitHub

https://github.com/away3d/away3d-core-fp11