前回に引き続きFlexの勉強中の松田です。
Flashで3Dを表示しなければならない機会があったので、Flash用の3D描画ライブラリを探して試してみました。
有名どころにPaperVision3Dというライブラリがあるのですが、今回はこれから派生したAway3Dを使ってみました。
ここのデモページでどんなことが出来るのか見ることができます。すごいです。
3Dを扱うこと自体が初めてなので、とりあえずは付属のサンプルを表示させるところからやってみたいと思います。
ダウンロードページから最新版のソースコードをダウンロードします。
解凍すると「lessons」というディレクトリがあってその中にサンプルがいくつか入っているので、その中から「Lesson_Basic_02_Primitives.swf」を表示させてみたいと思います。
同梱のflaファイルはAdobe Flash CS3等のアプリケーションが無いと開けませんが、サンプルのソースコードだけはこのページで見ることができるのでこっちから取得しましょう。
まずは通常のFlexプロジェクトの作成と同様に<mx:Application>タグまで生成します。
その後、<mx:Script>タグを追加してこのソースコードを貼り付けることになるのですが、このソースコードはFlex用に作られたものではないので、これだけでは動作しません。
サンプルコード上では、CubeやSphereを乗せたView3DオブジェクトをaddChild()しているだけですが、Flex上で動作させるには、View3DをUIComponentにaddChild()した後、そのUIComponentをaddChild()することになります。
UIComponentを経由してaddChildさせる感じです。
あとはそのスクリプトを<mx:Application>のcreationCompleteで呼び出します。
これで実行。
やった。無事表示できました。
ソースコードは表示画面を右クリックして「ソースの表示」を選択してください。
物体上で右クリックするとAway3Dのメニューが開いちゃうので、背景で右クリックしてください。
これでFlex上で動作できるようになったので、あとはサンプルを見ながらいじりまくってみます。
Away3Dのソースコードを覗いてみるとわかりますが、このライブラリはほっとんどコメントがありません。
Googleとカンと根性を頼りに試しまくるとなんとなく効果がわかってくるのでがんばりましょう。
そして今回触ってみてわかった成果が下の通りです。
覚えたことを思いつくまま羅列していきます。
物体の表示、移動
表示させる物体は全てObject3Dクラスを継承している
Object3Dクラスを移動させるにはmoveFoward(), moveBackward(), moveUp(), moveDown(), moveRight(), moveLeft(), moveTo()あたりを使う
物体を回転させるには、rotationX, rotationY, rotationZの値を増減させる
カメラ
カメラもObject3Dを継承したCamera3Dオブジェクトなので、Object3Dと同じメソッドで移動させることができる
カメラは移動しただけじゃ向いてる方向は変わらないので、どこかを向かせたいときはlookAt()メソッドを使う
moveTo()やlookAt()で指定する引数はNumber3Dオブジェクト（x,y,zの値だけを持つオブジェクト）
Object3Dの座標もこのNumber3D型のpositionという変数で持っている
なので、カメラを特定の方向に向けたければ view.camera.lookAt(new Number3D(100, 200, 300));
cubeの方を向かせたければ view.camera.lookAt(cube.position);
物体の色
new Cube({material:"grey#black",・・・ ここで指定するmaterialで物体の色や特性を決める
単純に色だけ指定する場合は、"面の色#線の色"
光源を反映する物体にする場合は、new ShadingColorMaterial(何かの色)
光源
光源はLight3Dオブジェクトを配置
光源によって色が変わるオブジェクトは、 material に new ShadingColorMaterial(0xFF0000) とか指定
ちょっとはまった細かいところ
カメラをY軸上から(0,0,0)を向かせるとうまく表示されない (0,0,1)あたりにして回避
灰色は"gray"じゃなく"grey"で定義されてる
分からないこと
ある物体を見ながら回りこむ動きって出来るの？
moveRight(target.position);の直後にlookAt(target.position);するとそれっぽくなるけど違うような・・・
地道に座標計算するしかないのか
役に立つかどうかは分かりませんが、このあたりを勉強したときに出来たサンプルを置いておきます。
何かの役に立てば幸いです。
ソースコードは上と同じで、右クリックして「ソースを表示」してください。