暇を見つけては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ソフトで作成・エクスポートしたデータ等も、扱えるみたいなので面白そうです。
先人の方々は、もっと凄いものを作成されているので、私も少し勉強しようと思います。