Papervision3Dの最近のブログ記事

以前、3ds maxにColladaMAXプラグインを用いてdae形式のファイルを出力し、Papervision3dでそれを表示させるという方法を紹介したが、今回はAS3 Geom Class ExporterというMaxScriptを用いてActionScript3.0形式のファイルにして使用してみた。


オブジェクトの設定とかUVマップとかは、今までの[Papervision3d]#4 3ds maxでモデリングしたデータをColladaを使って表示する①の1～20や、[Papervision3d]#6 ライト・影をテクスチャによって表現の(1)～(3)を参照。


出来たオブジェクトをActionScript3.0で保存するほう為には、

(1) AS3 Geom Class Exporterをダウンロードする。
AS3 Geom Class Exporterはshirotokoroさんのブログの、ここでダウンロードできます。
Download demo sources and 3ds max scriptからダウンロードしたら、ファイルを解凍

(2) 3ds maxからAS3 Geom Class Exporterを実行できるようにする
3ds maxの画面右から、ユーティリティのタブをクリックし、MAXScriptを選択し、スクリプトを実行をクリック






































(1)で解凍したフォルダの、AS3GeomClassExporter.msファイルを実行


(3) AS3 Geom Class Exporterでファイルを出力
ユーティリティーと書かれているセレクトボックスからAS3 Geom Class Exporterを選択すると下に、AS3 Geom Class Exporterの画面が出るEngineをPapervision3d1.5に指定し、ExportClass


































これで、指定したクラス名(ここではMyObject)でファイルが出力される。




これを扱うためのソースはMAXScriptと一緒に入っているデモに書かれているので、とりあえずはそれを使う。



単に表示するとかなら、Collada形式でもAS3.0形式でも出来るが、AS3.0のようにクラス化されていると、昔書いた[Papervision3d]#3 複数のオブジェクトに異なったイベントリスナーを付けてみるのように、マウスイベントとかも細かく記述できるからこっちの方が便利かも


↓は実際にAS3 Geom Class Exporterで出力したファイルを表示させたもの

最近、ブログの更新が滞ってて申し訳ない。まぢレポート出すぎ・・・


さて、今回は、Papervision3d × 3ds maxで表示させるオブジェクトに影をつける為の方法をメモっておく
私の調べた限りでは、Papervision3dに"ライト"という概念がない

そこで、UVWマップのテクスチャを使って影っぽいものを表現する



やり方は、
(1) オブジェクトをモデリング
(2) ライトを設定し、テクスチャをレンダリングし、画像ファイルとして保存
(3) 出力したテクスチャをUVWアンラップ
(4) オブジェクトをCollada(.dae)ファイルで出力
である。



(1) オブジェクトをモデリング
サイコロも飽きてきた頃なので、最近モデリングしたヴァイオリンを使うことにした


(2) ライトを設定し、テクスチャをレンダリングし、画像ファイルとして保存
作成のライトのスカイライトを選び、影付けにチェックをし、床に置く


























































参考サイト
ricardocabello　How to render the illumination to a texture for Papervision3D with 3D Studio MAX

前回の[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でモデリングをする。

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

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

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

また、オブジェクトの種類（グループ？）によって、イベント処理を変更したいし、全オブジェクトの回転を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 { } } }

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