2007年9月アーカイブ

前回の[Papervision3d]#4 3ds maxでモデリングしたデータをColladaを使って表示する①に続き、Papervision3dでColladaを使ってみる。

前回は、.dae形式の3dオブジェクトを生成するところまでやったので、今回は、それを使うソースについて書いてみる



実際に動作するソースは、

package { import flash.display.*; import flash.events.*; import org.papervision3d.cameras.Camera3D; import org.papervision3d.core.Number3D; import org.papervision3d.core.proto.MaterialObject3D; import org.papervision3d.materials.*; import org.papervision3d.scenes.InteractiveScene3D; import org.papervision3d.objects.DisplayObject3D; import org.papervision3d.objects.Collada; [SWF(backgroundColor = 0xCCCCCC)] public class main extends Sprite { [Embed(source="dice.gif")] private var DiceTexture:Class; [Embed(source="dice.dae", mimeType="application/octet-stream")] private var ColladaDice:Class; //　3Dライブラリ用 private var container : Sprite; private var scene : InteractiveScene3D; private var camera : Camera3D; private var myMaterials:Object; // 回転制御 private var rotX : Number = 0; private var rotY : Number = 0; // ルートノード private var rootNode : DisplayObject3D; public function main() { var diceTexture:Bitmap = new DiceTexture() as Bitmap; myMaterials = { MyDiceMaterial: new BitmapMaterial( diceTexture.bitmapData ) }; stage.frameRate = 60; stage.quality = "MEDIUM"; stage.scaleMode = "noScale"; stage.align = StageAlign.TOP_LEFT; init3D(); this.addEventListener( Event.ENTER_FRAME, update ); } //　3Dの初期化 private function init3D():void { //　コンテナ生成 this.container = new Sprite(); addChild(this.container); this.container.x = this.stage.stageWidth / 2; this.container.y = this.stage.stageHeight / 2; //　シーン生成 scene = new InteractiveScene3D( container ); //　カメラ設定 camera = new Camera3D(); camera.y = 30; camera.z = 100; camera.zoom = 5; camera.focus = 100; //　rootNode生成 //　シーンの下にrootNodeをつけ、その下に各モデルをくっつける rootNode = scene.addChild( new DisplayObject3D( "rootNode" ) ); var dice:Collada = new Collada( XML( new ColladaDice() ), new MaterialsList( myMaterials ) ); rootNode.addChildren( dice ); } //　毎フレームの処理 private function update( event:Event ):void { // マウス座標でオブジェクトを回転 rotX += this.container.mouseX / 150; rotY += this.container.mouseY / 150; rootNode.rotationX = rotX; rootNode.rotationY = rotY; //　レンダリング this.scene.renderCamera( camera ); } } }



17、18行目の
[Embed(source="dice.gif")] private var DiceTexture:Class; [Embed(source="dice.dae", mimeType="application/octet-stream")] private var ColladaDice:Class;
は、今までは使っていなかったが、
外部ファイルをActionScriptコンパイル後に生成されるswfファイルに含める時のコマンドで、さらにCでいう#defineみたいにここで定義した名前をプログラム内で使うことができる。


var diceTexture:Bitmap = new DiceTexture() as Bitmap; myMaterials = { MyDiceMaterial: new BitmapMaterial( diceTexture.bitmapData ) };
は、3ds maxで貼ったテクスチャの読み込みである。
まず、先ほど定義した画像ファイルのインスタンスを生成し、Bitmap型にキャスト
それを、Colladaコンストラクタに渡すためのMaterial配列(?)の中に、前回の⑩で定義したマテリアル名で登録する。


最後に
var dice:Collada = new Collada( XML( new ColladaDice() ), new MaterialsList( myMaterials ) ); rootNode.addChildren( dice );
で、.daeファイルと、それに対応するマテリアルを引数に、Colladaオブジェクトを生成し
rootNodeに追加する



参考サイト
Papervision3D tutorial from the ground up (http://rozengain.com/?postid=28)

今回は、以下のコトを試してみる。
①3ds maxで3Dオブジェクトをモデリング
②ColladaMAXプラグインを用いて、3ds maxからCollada(.dae)形式でファイルを出力
③Papervision3dを使って、表示する


まず、環境設定から
3ds maxはデフォルトでは、Colladaを出力することができないのでColladaMAXというプラグインを入れる必要がある。
まず、Feeling Softwareに行き、ID登録をする。
ログインすると、DownloadからColladaMAXをダウンロードすることが出来る。

3ds maxがインストールされているなら、ダウンロードしたファイルを実行し、指示に従えばプラグインを入れることができる。




環境が整ったら、3ds maxでモデリングをする。

第25回 Flex2勉強会に参加しました。


今回のメインは、来月の11月1日～2日に行われるAdobe MAX Japan 2007やCOLDFUSION 8やAIRやFlex3でした。

まず、Adobe MAX Japan 2007は、アメリカのMAXのように技術者ばかりが集まってずっと技術的なことを話すわけではなく、デザイナーも多く参加し、プログラマーではやらないようなものも見ることがでくるとのこと。

詳しくはＷｅｂサイトにセッションのスケジュールとか書いてあるので参照してください。
また、早く予約しないと人気のセッションは満員になってきているのでお急ぎを


そして、COLDFUSION 8について、
この会で始めて知ったので、まだ詳しくは知らないが、
Webアプリケーションを作る上で、Javaや.NET、ExchangeServerのラッパーをしてくれるらしい。
例えば、.NETで制作したプログラムをCOLDFUSION側から簡単に呼び出して実行したりできるらしい。
まぁ、とにかく、カナリ少ないソースでいろんなことができるみたい

複数のオブジェクトに対し、

・マウスがオブジェクトに乗った時（マウスオーバー）
・マウスがオブジェクトから離れた時（マウスアウト）
・オブジェクトがクリックされた時（クリック）

に何らかのイベントを起こすようにする。

また、オブジェクトの種類（グループ？）によって、イベント処理を変更したいし、全オブジェクトの回転をrootNodeの回転で実現したいので、sceneに直接addChildせずに、rootNode的なものを用いることにする。
（Flashでは当たり前かもだけど、Flash自体初心者ｗｗ）



まず、前回作ったサイコロを５つで次のコトをやってみる
・黒いサイコロは、マウスが乗ると縮小
・白いサイコロは、マウスが乗ると拡大
・いずれもマウスが離れると元のサイズに戻る
・クリックされると、どのオブジェクトがクリックされたかを表示

結果は、

この結果に辿りつくまでにカナリ時間がかかった
Sceneをどのクラスのインスタンスにするかによってキーイベントの実装が異なるみたい
MovieScene3Dを使う場合は、リスナーを付けたいオブジェクトはかならずこのインスタンス直下になければならないようだ
だが、この方法だと先ほど述べたように全体を回転させたい場合にrootNodeという手段が使えないのだ。

これを解決するのが、InteractiveScene3Dクラスである。このインスタンスを作れば、今言ったような制限はなくなる。


そして、一番大変だったのが、
黒いサイコロと白いサイコロで、異なるイベントを起こす部分である。
Cubeオブジェクトのcontainer.nameに識別のための文字列を入れておき、イベントの最初に条件分岐するという方法もあるが、なんかしっくりこない。
そこで、黒いサイコロと白いサイコロを別々のクラスにし、イベント内でさらに自分のイベント用メソッドを呼び出すことに。
ここで問題になったのが、そのままCubeを継承して新たなクラスを作っても、DisplayObject3Dクラスに内メソッドを呼ぶとコンパイルエラーになる（当たり前）
なので、interfaceを利用することにした。調べてみると、actionScriptにもちゃんとinterfaceがあるので、使ったことないけどどうせJavaと同じように書けばいんだろうということで作成。
そのinterfaceを新たに作ったクラスでimplementsして、別々の処理を書けば完成。


クラス名をBlackDiceとかにするんなら、Material関係もクラス内に書いても良かったけど、もう動いちゃったから変更するのめんどくさくなったｗｗ。
あと、ClickEventメソッドは使わなかったｗｗ とりあえず、ソースは、
main.as
package { import flash.display.*; import flash.events.*; import flash.geom.*; import flash.filters.*; import flash.text.*; import org.papervision3d.scenes.*; import org.papervision3d.objects.*; import org.papervision3d.cameras.*; import org.papervision3d.materials.*; import org.papervision3d.events.*; import org.papervision3d.core.*; import org.papervision3d.core.proto.*; import org.papervision3d.core.geom.*; [SWF(backgroundColor = 0x3333aa)] public class main extends Sprite { //　メンバ変数 private var container : Sprite; private var scene : InteractiveScene3D; private var camera : Camera3D; private var rootNode : DisplayObject3D; private var rotX : Number = 0; private var rotY : Number = 0; private var tf:TextField; // 画面に表示するテキスト //　コンストラクタ public function main():void { stage.frameRate = 60; stage.quality = "MEDIUM"; stage.scaleMode = "noScale"; stage.align = StageAlign.TOP_LEFT; this.addEventListener(Event.ENTER_FRAME, update ); this.stage.addEventListener(Event.RESIZE, resize ); init3D(); } //　3Dの初期化 private function init3D():void { //　コンテナ生成 this.container = new Sprite(); addChild(this.container); this.container.x = this.stage.stageWidth / 2; this.container.y = this.stage.stageHeight / 2; //　シーン生成 scene = new InteractiveScene3D( container ); //　カメラ設定 camera = new Camera3D(); camera.y = 100; camera.z = -800; camera.focus = 1200; camera.zoom = 3; //　rootNode生成 //　シーンの下にrootNodeをつけ、その下に各モデルをくっつける rootNode = new DisplayObject3D( "rootNode" ) scene.addChild( rootNode ); //　サイコロの作成 makeBlackDice(); makeWhiteDice(); //　テキストフィールドの作成 tf = new TextField(); tf.backgroundColor = 0x000000; tf.defaultTextFormat = new TextFormat("Verdana", 16, 0xFFFFFFFF); tf.selectable = false; tf.width = 300; addChild(tf); //リスナー登録 scene.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_PRESS, diceClicked); scene.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OVER , diceMouseOver); scene.interactiveSceneManager.addEventListener(InteractiveScene3DEvent.OBJECT_OUT , diceMouseOut); } //　毎フレームの処理 private function update( event:Event ):void { // マウス座標でオブジェクト全体を回転 rotY += this.container.mouseY / 50; rotX += this.container.mouseX / 50; rootNode.rotationY = rotY; rootNode.rotationX = rotX; //レンダリング this.scene.renderCamera( camera ); } //　画面のリサイズ時の処理 private function resize(event:Event):void { this.container.x = this.stage.stageWidth / 2; this.container.y = this.stage.stageHeight / 2; } //　黒いサイコロを作成 private function makeBlackDice():void { //　サイコロの目のMaterialを作成 var ml:MaterialsList = new MaterialsList(); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/b_1.gif" ), 'all'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/b_2.gif" ), 'front'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/b_3.gif" ), 'top'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/b_4.gif" ), 'bottom'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/b_5.gif" ), 'back'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/b_6.gif" ), 'right'); //　サイコロを作成 var dice1:BlackDice = new BlackDice( ml, 30, 30, 30, 2, 2 ); var dice2:BlackDice = new BlackDice( ml, 30, 30, 30, 2, 2 ); var dice3:BlackDice = new BlackDice( ml, 30, 30, 30, 2, 2 ); //　サイコロが重ならないように座標をずらす dice1.x = -100; dice2.x = -50; dice3.x = 0; //　サイコロに名前をつけて識別 dice1.name = "サイコロＡ（黒）"; dice2.name = "サイコロＢ（黒）"; dice3.name = "サイコロＣ（黒）"; //　サイコロを引数のNodeに登録 rootNode.addChild( dice1 ); rootNode.addChild( dice2 ); rootNode.addChild( dice3 ); } //　白いサイコロを作成 private function makeWhiteDice():void { //　サイコロの目のMaterialを作成 var ml:MaterialsList = new MaterialsList(); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/w_1.gif" ), 'all'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/w_2.gif" ), 'front'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/w_3.gif" ), 'top'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/w_4.gif" ), 'bottom'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/w_5.gif" ), 'back'); ml.addMaterial(new InteractiveBitmapFileMaterial( "img/w_6.gif" ), 'right'); //　サイコロを作成 var dice1:WhiteDice = new WhiteDice( ml, 30, 30, 30, 2, 2 ); var dice2:WhiteDice = new WhiteDice( ml, 30, 30, 30, 2, 2 ); //　サイコロが重ならないように座標をずらす dice1.x = 50; dice2.x = 100; //　サイコロに名前をつけて識別 dice1.name = "サイコロＤ（白）"; dice2.name = "サイコロＥ（白）"; //　サイコロを引数のNodeに登録 rootNode.addChild( dice1 ); rootNode.addChild( dice2 ); } //　サイコロがクリックされた時に発生するイベント（白、黒共通） //　クリックされたサイコロの名前を表示 private function diceClicked( event:InteractiveScene3DEvent ):void { tf.text = event.displayObject3D.name + "がクリックされたよ"; } //　マウスがサイコロに乗った時に発生するイベント private function diceMouseOver( event:InteractiveScene3DEvent ):void { var e:MyEvent = event.displayObject3D as MyEvent; e.MouseOverEvent(); } //　マウスがサイコロから離れた時に発生するイベント private function diceMouseOut( event:InteractiveScene3DEvent ):void { var e:MyEvent = event.displayObject3D as MyEvent; e.MouseOutEvent(); } } }
MyEvent.as
package { public interface MyEvent { function MouseOverEvent():void; function MouseOutEvent():void; function ClickEvent():void; } }
BlackDice.as
package { import org.papervision3d.objects.Cube; import org.papervision3d.materials.MaterialsList; public class BlackDice extends Cube implements MyEvent { //　コンストラクタ function BlackDice(materials:MaterialsList, width:Number, depth:Number, height:Number, segmentsS:int, segmentsT:int, segmentsH:int=1) { super( materials, width, depth, height, segmentsS, segmentsT, segmentsH ); } //　黒いサイコロにマウスが乗ったときに呼ばれるイベント //　サイコロのサイズを小さくする public function MouseOverEvent():void { scaleX = 0.5; scaleY = 0.5; scaleZ = 0.5; } //　黒いサイコロからマウスが離れたときに呼ばれるイベント //　サイコロのサイズを元に戻す public function MouseOutEvent():void { scaleX = 1; scaleY = 1; scaleZ = 1; } // public function ClickEvent():void { } } }
WhiteDice.as
package { import org.papervision3d.objects.Cube; import org.papervision3d.materials.MaterialsList; public class WhiteDice extends Cube implements MyEvent { //　コンストラクタ function WhiteDice(materials:MaterialsList, width:Number, depth:Number, height:Number, segmentsS:int, segmentsT:int, segmentsH:int=1) { super( materials, width, depth, height, segmentsS, segmentsT, segmentsH ); } //　白いサイコロにマウスが乗ったときに呼ばれるイベント //　サイコロのサイズを大きくする public function MouseOverEvent():void { scaleX = 1.5; scaleY = 1.5; scaleZ = 1.5; } //　白いサイコロからマウスが離れたときに呼ばれるイベント //　サイコロのサイズを元に戻す public function MouseOutEvent():void { scaleX = 1; scaleY = 1; scaleZ = 1; } // public function ClickEvent():void { } } }

もっと良い方法があれば教えてください

今日は、Papervision3Dで立方体（直方体でもいいが）を作ってみる。

立方体を作るためにはcubeというクラスを使うわけだが、このcubeというクラスは途中で改良され、前回ちょっと触れたかがライブラリのバージョンによってコンストラクタの引数が若干異なる。

今回は、その両方のバージョンでやってみる。

まず、古い方から、ここからRevision 91をダウンロードしてくれ

ソースは、

package { import flash.display.*; import flash.events.*; import flash.geom.*; import flash.filters.*; import org.papervision3d.scenes.*; import org.papervision3d.objects.*; import org.papervision3d.cameras.*; import org.papervision3d.materials.*; import org.papervision3d.core.*; import org.papervision3d.core.proto.*; import org.papervision3d.core.geom.*; [SWF(backgroundColor = 0x3333aa)] public class main extends Sprite { //　メンバ変数 private var container : Sprite; private var scene : Scene3D; private var camera : Camera3D; private var rootNode : DisplayObject3D; private var cube : DisplayObject3D; private var material : BitmapFileMaterial; private var rotX : Number = 0; private var rotY : Number = 0; //　コンストラクタ public function main():void { stage.frameRate = 60; stage.quality = "MEDIUM"; stage.scaleMode = "noScale"; stage.align = StageAlign.TOP_LEFT; this.addEventListener(Event.ENTER_FRAME, update ); this.stage.addEventListener(Event.RESIZE, resize ); init3D(); } //　3Dの初期化 private function init3D():void { //　コンテナ生成 this.container = new Sprite(); addChild(this.container); this.container.x = this.stage.stageWidth / 2; this.container.y = this.stage.stageHeight / 2; //　シーン生成 scene = new Scene3D( container ); //　カメラ設定 camera = new Camera3D(); camera.y = 100; camera.z = -800; camera.focus = 1200; camera.zoom = 0.3; //　rootNode生成 //　シーンの下にrootNodeをつけ、その下に各モデルをくっつける rootNode = scene.addChild( new DisplayObject3D( "rootNode" ) ); //　マテリアル設定 material = new BitmapFileMaterial( "./star.jpg" ); cube = new Cube( material, 300, 300, 300, 1, 1 ); rootNode.addChild( cube ); } //　毎フレームの処理 private function update( event:Event ):void { // マウス座標でオブジェクト全体を回転 rotY += this.container.mouseY / 50; rotX += this.container.mouseX / 50; rootNode.rotationY = rotY; rootNode.rotationX = rotX; //レンダリング this.scene.renderCamera( camera ); } //　画面のリサイズ時の処理 private function resize(event:Event):void { this.container.x = this.stage.stageWidth / 2; this.container.y = this.stage.stageHeight / 2; } } }

結果は、


となる。

注目すべき部分は、
material = new BitmapFileMaterial( "./star.jpg" ); cube = new Cube( material, 300, 300, 300, 1, 1 ); rootNode.addChild( cube );
まず、立方体の表面に貼るテクスチャを設定するのに、BitMapFileMaterialオブジェクトを用い、Cubeコンストラクタの第一引数に渡す。
後で、解説するが、このCubeコンストラクタの第一引数が変更された。
結果から想像できると思うが、この方法では、立方体の全ての面に対し、同じテクスチャしか貼れなくなってしまい、サイコロのようなそれぞれの面で異なったテクスチャを貼ることができない。

ちなみに第２引数～第４引数は、立方体の大きさを指定するようになっている。


次に、改良された方でサイコロを作ってみる。
ソースで変更するところは、↑で抜粋した部分を var ml:MaterialsList = new MaterialsList(); ml.addMaterial(new InteractiveBitmapFileMaterial( "./1.gif" ), 'all'); ml.addMaterial(new InteractiveBitmapFileMaterial( "./2.gif" ), 'front'); ml.addMaterial(new InteractiveBitmapFileMaterial( "./5.gif" ), 'back'); ml.addMaterial(new InteractiveBitmapFileMaterial( "./6.gif" ), 'right'); ml.addMaterial(new InteractiveBitmapFileMaterial( "./3.gif" ), 'top'); ml.addMaterial(new InteractiveBitmapFileMaterial( "./4.gif" ), 'bottom'); cube = new Cube( ml, 300, 300, 300, 1, 1 ); rootNode.addChild( cube );
のようにすればいい。これで、立方体の面ひとつずつに対し、別々のテクスチャを貼ることが出来る。


参考サイト
Flash3Dブログ: Papervision3Dを始めてみた

やっぱこれからの時代は、いろんな情報をネットのあちら側で管理する時代なんだなぁとふと思い、
じゃぁ、ネットのこちら側だけで動作するアプリより、Webアプリケーションの勉強した方がいんじゃね？という考えになり、
今の流行は、サーバーサイドだけのアプリじゃなくて、クライアントサイドでAjaxとかいろいろ駆使するのがいいんだろうなぁってなって、
セカンドライフは好きじゃないけど、３Ｄってやっぱいいよなぁーという想いから
ブラウザで３Ｄ使えるアプリとか作ってみたいなという結論に至ったｗｗ


そこで、調べてみると、Papervison3dというものがあるらしい
これは、FlashPlayerを使って、３次元なアプリを作るためにMITがオープンソースで公開しているライブラリらしい。ここにFlashで動作する3Dエンジン Papervision3D」という記事がある。
このデモ(?)は感動ものだ

まぁ、簡単に言うと、ActionSctiptで3D扱うためのライブラリのようだ。


flashもActionScriptも使ったことないけど、せっかくなので使ってみる。

とりあえずは環境設定
まず、ActionScriptをコンパイルするためにFlex 2 SDKが必要だ。
これは、アドビの公式ＨＰから無料でダウンロードすることができる（※要 ID登録）
これを使えば、Flash cs3とかいう何万もするソフトを買わなくても作ることができる。

次に、Papervison3dのライブラリだ。これは、svnで公開されていて、URLは、古いバージョンと現在のバージョンの二箇所がある。
フツーに考えて、新しいバージョンを使った方がいいのだが、既にブログなので公開されているサンプルソースなどが、古いバージョンで書かれたものだったりするみたい。とりあえず、サンプルに変更に変更を加えて勉強するつもりなので、古い方をCubeの違いが分かったので新しい方をエクスポートしておく。
落としたら、flex 2 SDKを展開したフォルダのframeworks内のsourceフォルダに突っ込んでおく。
そして、frameworks内のflex-config.xmlファイルの15行目あたりのsource-pathに
source/
を追加し、これが有効になるようにコメントアウトを外しておく。

これで開発環境は整ったかな？

ぁ、ActionScriptは、mxmlcコマンドでコンパイルするみたいなので、
flex 2 SDKを展開してフォルダ/binをクラスパスに通しておけば、後々コンパイルが楽かも。


具体的な、プログラムについてはまた明日書くことにする