読者です 読者をやめる 読者になる 読者になる

IntelliJ IDEAでAway 3Dを始めよう。

とりあえずTutorialの動かしかたを備忘録として残します。

  1. プロジェクトを作成します。

Flash Moduleで作りましょう。
f:id:tan_go238:20130426012814p:plain

  1. Target platformは Web で。

Pure ActionScriptにチェックを入れる
Flex SDKを選択。
Target playerは 11以上
f:id:tan_go238:20130426012827p:plain

  1. サンプルコードを写す

以下のコードをコピペします。
※クラス名とかは適当に合わせて変えます。

https://github.com/away3d/away3d-tutorials-fp11/blob/master/tutorials/particles/particles_beginning/src/TheBasicTutorial.as

/*
 * https://github.com/away3d/away3d-tutorials-fp11/blob/master/tutorials/particles/particles_beginning/src/TheBasicTutorial.as
 */
package
{
    import away3d.animators.data.ParticleProperties;
    import away3d.animators.data.ParticlePropertiesMode;
    import away3d.animators.nodes.ParticlePositionNode;
    import away3d.animators.nodes.ParticleVelocityNode;
    import away3d.animators.ParticleAnimationSet;
    import away3d.animators.ParticleAnimator;
    import away3d.containers.View3D;
    import away3d.controllers.HoverController;
    import away3d.core.base.Geometry;
    import away3d.debug.AwayStats;
    import away3d.entities.Mesh;
    import away3d.materials.ColorMaterial;
    import away3d.primitives.CubeGeometry;
    import away3d.primitives.PlaneGeometry;
    import away3d.tools.helpers.ParticleGeometryHelper;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Vector3D;

    [SWF(backgroundColor="#000000", frameRate="60")]
    public class Hoge extends Sprite
    {


        private var _view:View3D;

        //navigation variables
        private var _cameraController:HoverController;
        private var _move:Boolean = false;
        private var _lastPanAngle:Number;
        private var _lastTiltAngle:Number;
        private var _lastMouseX:Number;
        private var _lastMouseY:Number;

        public function Hoge()
        {
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;

            _view = new View3D();
            _view.antiAlias = 2;
            addChild(_view);

            _cameraController = new HoverController(_view.camera, null, 45, 20, 1000, 5);

            addChild(new AwayStats(_view));

            initScene();
            initParticle();

            //add listeners
            addEventListener(Event.ENTER_FRAME, onEnterFrame);
            stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
            stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
            stage.addEventListener(Event.RESIZE, onResize);
            onResize();
        }

        private function initScene():void
        {
            var groundMaterial:ColorMaterial = new ColorMaterial();
            var ground:Mesh = new Mesh(new PlaneGeometry(2000, 2000), groundMaterial);
            ground.y = -100;
            _view.scene.addChild(ground);
        }

        private function initParticle():void
        {
            //generate the particle geometry
            var cube:Geometry = new CubeGeometry(10, 10, 10);
            var geometrySet:Vector.<Geometry> = new Vector.<Geometry>;
            for (var i:int = 0; i < 1000; i++)
            {
                geometrySet.push(cube);
            }
            var particleGeometry:Geometry = ParticleGeometryHelper.generateGeometry(geometrySet);


            //create the particle animation set
            var animationSet:ParticleAnimationSet = new ParticleAnimationSet(true, true, true);

            //add behaviors to the animationSet
            animationSet.addAnimation(new ParticlePositionNode(ParticlePropertiesMode.LOCAL_STATIC));
            animationSet.addAnimation(new ParticleVelocityNode(ParticlePropertiesMode.GLOBAL, new Vector3D(0, 50, 0)));

            //set the initialiser function
            animationSet.initParticleFunc = initParticleParam;


            //create material, mesh and animator
            var material:ColorMaterial = new ColorMaterial(0xff0000);
            var particleMesh:Mesh = new Mesh(particleGeometry, material);
            var animator:ParticleAnimator = new ParticleAnimator(animationSet);
            particleMesh.animator = animator;
            animator.start();
            _view.scene.addChild(particleMesh);
        }

        /**
         * Initialiser function for particle properties. It's invoked for every particle.
         */
        private function initParticleParam(prop:ParticleProperties):void
        {
            prop.startTime = prop.index * 0.005;
            prop.duration = 10;
            prop.delay = 5;
            //calculate the original position of every particle.
            var percent:Number = prop.index / prop.total;
            var r:Number = percent * 1000;
            var x:Number = r*Math.cos(percent * Math.PI * 2 * 20);
            var z:Number = r*Math.sin(percent * Math.PI * 2 * 20);
            prop[ParticlePositionNode.POSITION_VECTOR3D] = new Vector3D(x, 0, z);
        }


        private function onEnterFrame(event:Event):void
        {
            if (_move)
            {
                _cameraController.panAngle = 0.3*(stage.mouseX - _lastMouseX) + _lastPanAngle;
                _cameraController.tiltAngle = 0.3*(stage.mouseY - _lastMouseY) + _lastTiltAngle;
            }
            _view.render();
        }

        private function onMouseDown(event:MouseEvent):void
        {
            _lastPanAngle = _cameraController.panAngle;
            _lastTiltAngle = _cameraController.tiltAngle;
            _lastMouseX = stage.mouseX;
            _lastMouseY = stage.mouseY;
            _move = true;
            stage.addEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
        }

        private function onMouseUp(event:MouseEvent):void
        {
            _move = false;
            stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
        }

        private function onStageMouseLeave(event:Event):void
        {
            _move = false;
            stage.removeEventListener(Event.MOUSE_LEAVE, onStageMouseLeave);
        }

        private function onResize(event:Event = null):void
        {
            _view.width = stage.stageWidth;
            _view.height = stage.stageHeight;
        }
    }
}
  1. Away3Dライブラリを追加

http://away3d.com/download/ から SWCファイルをダウンロードします。

ダウンロードしたswcはプロジェクトにlibフォルダみたいなのを作りそこにいれておきましょう。

 [File]メニューの[Project Structure]を選択します。
 [Libraries]を選択して一つ隣の上にある「+」を押下します。
 プルダウンが表示されるので[ActionScript/Flex]を選びます。
 Away3D のswcを選択します。

f:id:tan_go238:20130426012841p:plain

 どの設定に追加するか選択します。
 この時、下に「〜 is not used」ってエラーメッセージが出てると追加できてないので注意
 ※以下の画像のようなメッセージがでたらだめ。ちゃんと選択してOKを押す。

f:id:tan_go238:20130426012850p:plain



ここまで設定したらちゃんとコンパイルできるか確認する。

  1. HTMLを編集する

html-templateのindex.template.htmlを編集する。
※Flash起動時の設定を変更してGPU サポートモードにする。

params.wmode = "direct"; の追加

            var params = {};
            params.quality = "high";
            params.bgcolor = "${bgcolor}";
            params.allowscriptaccess = "sameDomain";
            params.allowfullscreen = "true";
            params.wmode = "direct";


ここまで設定したら準備は完了、shift + F10 を押して実行する

f:id:tan_go238:20130426014155p:plain


おわり。