FlashBuilder4.6でAway3D 4.0.0 Betaで遊んでみた。

2012.06.08.金
AIR技術

 

暇を見つけてはFlex/AIRで遊んでいたのですが、以前からやりたかった3Dに挑戦しました。
(いまさらですが・・・)

環境としては、
・FlashBuilder4.6
・Away3D 4.0.0 Beta


1.とりあえず、Away3Dのページからsourceをダウンロード
2.Flexで適当なプロジェクトを作成
3.2で作成したプロジェクトのsrcフォルダに、1でダウンロードしたものを解凍し、「away3d」「com.adobe.utils」「pb」を配置
4.2で作成したプロジェクトのhtml-template内にあるindex.template.htmlの49行目辺りに以下を追加

params.wmode="direct";


5.作成したプロジェクトのmxmlの頭で、Away3D関係の変数を宣言
private var _view:View3D;
private var _scene:Scene3D;
private var _pointLight:PointLight;
private var _lightPicker:StaticLightPicker;
private var _camera:Camera3D;
private var _cubeGeo:CubeGeometry;
private var _cube:Mesh;


6.初期処理時にAway3D関係のオブジェクトを初期化
protected function init():void {
// FlexでAway3Dの各種オブジェクトを配置するために、UIComponentを追加
var ui:UIComponent = new UIComponent();
this.addElement(ui);

// Viewの設定
this._view = ui.addChild(new View3D(this._scene)) as View3D;
this._view.antiAlias = 4;
this._view.backgroundColor = 0x000000;

// Sceneの設定
this._scene = this._view.scene;

// Cameraの設定
this._camera = this._view.camera;

// Lightの設定
this._pointLight = new PointLight();
this._scene.addChild(this._pointLight);
this._lightPicker = new StaticLightPicker([this._pointLight]);

// 赤いCubeを生成
var material:ColorMaterial = new ColorMaterial(0xFF0000);
material.lightPicker = this._lightPicker;
this._cubeGeo = new CubeGeometry(230, 230, 230, 4, 4, 4);
this._cube = new Mesh(this._cubeGeo, material);
this._cube.x = 0;
this._cube.y = 100;
this._cube.z = 0;
this._view.scene.addChild(this._cube);

// Cameraの初期位置を調整
this._camera.y = 300;

// イベントリスナーの追加
this.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}


7.とりあえず、今回はマウスがドラッグされた距離に基づいて配置したCubeを回転させることを試みたので、以下のような感じにしてみた。
/**
* マウスダウンイベントハンドラー
*/
private function onMouseDown(e:MouseEvent):void {
this._startX = e.localX;
this._startY = e.localY;

this.addEventListener(MouseEvent.MOUSE_UP, onMouseUp);
}

/**
* マウスアップイベントハンドラー
*/
private function onMouseUp(e:MouseEvent):void {
this.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp);
this._lenX = e.localX - this._startX;
this._lenY = e.localY - this._startY;
}

/**
* アニメーション
*/
private function onEnterFrame(e:Event):void {
// マウスの移動量・移動方向と減速値に基づいてCubeを回転させる。
this._cube.rotationY += (this._lenX / this._g);
this._cube.rotationX += (this._lenY / this._g);

this._lenX = this._lenX / this._g;
this._lenY = this._lenY / this._g;
this._pointLight.position = this._camera.position;
this._view.render();
}



で、出来上がったのが以下のような感じです。
Flash上でマウスをドラッグすると赤いCubeが回転します。
すみませんが、それだけです・・・


3DCGソフトで作成・エクスポートしたデータ等も、扱えるみたいなので面白そうです。
先人の方々は、もっと凄いものを作成されているので、私も少し勉強しようと思います。