PaperVision3D Archive

「よしっ、PV3Dでもやろう！」…と思っても、Flash IDEだとクラスのimport文を（毎回）書いたりしなければならず、面倒なことが多いですよね？

僕もFlash IDE＆フレームアクションでPV3Dの練習をしたりしますが、毎回「う～ん、面倒っ！」って思ってました。

意外とそこで、やる気がそがれちゃったりします…

そこで、PV3DのBasic View用の雛形を書いてくれるJSFLを作ってみました。

ダウンロードしたファイルをどこに入れるのか？　とか、コマンドの実行手順等は、一昨日のエントリをご覧ください。

で、このコマンドを実行すると…

// Papervision3Dライブラリを読み込む
import org.papervision3d.view.BasicView;
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*;

// BasicViewを作成
var world:BasicView = new BasicView();
addChild(world);

// primitiveとかを作成

// 作成したものをworldに追加する
world.scene.addChild(●●●);

// startRendering()させる
world.startRendering();

// EnterFrameさせる
addEventListener(Event.ENTER_FRAME, loop);

// loopさせたい処理
function loop(e:Event){

};

こんなコードが1フレーム目に記述されます。

毎回記述するくだりを、「ねぇ、JSFL君。君、ちょっと、やっといて！」みたいな感じです。

あとは必要な箇所だけ手を加えてあげれば、OK。

ちょっと試してみたい！　と思った時などに、サクッとできちゃうので、良いかと…

ダウンロードは以下よりどうぞ！

• PV3DのBasicView用JSFL（ZIP形式）

かなり力業のソースになっております。

前回のエントリ（Progression + CMS + PaperVision3D）で作ってみたPhoto Album的なもの。

（これなら）わざわざ3Dにする必要あるの？　って感じだったので、ステージをマウスでドラッグすると、カメラの視点が変わるようにしてみました。

• Photo Album（Progression + CMS + PaperVision3D）のデモ

3D超～初心者の僕は、PaperVision3DにPlaneなどをaddChildした際、（位置指定をしない場合）ステージの中央に配置されることに、戸惑ってしまいまして…

「何で、左上（Flashの場合の原点）じゃないの？」って。

こんな基本的なことを理解しておらず、かなりの時間を費やしてしまいました。

きちんと3Dの勉強します！

以前に、某コンテスト用にProgression + CMSで作った、PhotoAlbum的なもの。

• Photo Album（Progression + CMS）のデモ

それにPaperVision3Dを付け加えてみました。（とはいっても、Planeに貼り付けた単純なものなんですが…）

• Photo Album（Progression + CMS + PaperVision3D）のデモ

記事を投稿すれば、PaperVision3D空間にあるサムネイル画像が増えていきます。

データ＆ソースの殆どは、Progression + CMSの時に使ったものをそのまま流用しただけなんですが…

新たに付け加えたものとしては、CastSpriteを継承したPaperVision3Dのクラスを作ったくらい…

ProgressionとPaperVision3Dの連携は、ClockMakerのYasuさんの『ProgressionとPapervision3Dの連携 No.01』を大いに参考にさせて頂きました！

★作業手順

1. PaperVision3Dのクラスに、BasicViewを作成
2. BasicViewにPlaneを作成
3. Progression側のIndexSceneで動的に作成しているサムネイル画像を取得
4. MovieMaterialでPlaneに貼り付ける

簡単にいうと、こんな感じです。

BasicViewにPlaneを作成

2に関しては、サムネイルが投稿（更新）される度にfor文の数値を変えるのは面倒なので、PaperVision3Dのクラス側に以下の様な感じのソースを書いてます。

private var _scene:IndexScene;
/*IndexSceneの配列my_arrayを取得しておく*/
_scene = IndexScene(getSceneById("index"));
//trace(_scene.my_array);

for (var i:int = 0; i < _scene.my_array.length; i++) {
//Planeを作成

IndexScene側で動的に作成しているサムネイルを、配列にpushしておいて、PaperVision3Dのクラス側から、getSceneByIdを使って、その配列を取得しています。

で、その配列を使ってPlaneを作成してあげれば、いちいち（for文の数値を）変更しなくてもいいので、こんな手法を使ってみました。

Progression側のIndexSceneで動的に作成しているサムネイル画像を取得

IndexSceneで動的に動的に作成しているサムネイル画像に、個別のidを付けておきます。

var no:String = "imgBtn" + i;
var imageButton:Thumbnail = new Thumbnail( { id:no } );

こうしておいて、PaperVision3D側で、こんな感じに書いてあげます。

for (var i:int = 0; i < _scene.my_array.length; i++) {
　　　　var str:String = "imgBtn" + i;
　　　　img = Thumbnail(getInstanceById(str));

こうすれば、インスタンスを取得出来るので、あとは（幅と高さを指定した）Spriteにでもくるんであげて、MovieMaterialに渡してあげれば、無事表示されました。

サムネイルをクリックすると、シーンの遷移も行うことが出来ます。

マウスオーバー時の挙動とか、クリックがしづらいとか、（Progressionの）ツールチップの表示位置とか、ステージをグリグリしてカメラ位置を変更とか、やるべき（修正すべき）事は多々ありますが…

とりあえず、出来たということで…

今後ちょっとずつ機能を追加していく予定です。

★関連項目

• Progression + CMS（1）
• Progression + CMS（2）
• Progression + CMS（3）
• Progression + CMS（4）
• Progression + CMS（5）

★追記（2009/06/17）

Spriteでくるまなくても大丈夫！

先に、取得したインスタンスを、Spriteでくるんで～と書きました。

for (var i:int = 0; i < _scene.my_array.length; i++) {
　　　　var str:String = "imgBtn" + i;
　　　　img = Thumbnail(getInstanceById(str));
　　　　var mm:MovieMaterial = new MovieMaterial(img,true,true,true);

こんな感じにMovieMaterialの引数として、（取得したインスタンスを）そのまま渡してあげると、画像が意図したように表示されませんでした。

for (var i:int = 0; i < _scene.my_array.length; i++) {
　　　　var str:String = "imgBtn" + i;
　　　　img = Thumbnail(getInstanceById(str));
　　　　var sp:Sprite = new Sprite();
　　　　sp.graphics.beginFill(0xFFFFFF);
　　　　sp.graphics.drawRect(0, 0, 100, 80);
　　　　sp.graphics.endFill();
　　　　sp.addChild(img);
　　　　var mm:MovieMaterial = new MovieMaterial(sp,true,true,true);

そこで僕は、（取得したインスタンスを）こんな感じでSpriteでくるんであげて、それをMovieMaterialに渡す方法を採りました。

でも、こんなことしなくても…

for (var i:int = 0; i < _scene.my_array.length; i++) {
　　　　var str:String = "imgBtn" + i;
　　　　img = Thumbnail(getInstanceById(str));
　　　　var mm:MovieMaterial = new MovieMaterial(img,true,true,true,new Rectangle(0,0,100,80));

こんな感じで書いてあげても、上手くいったので、追記しておきます。

ClockMaker Blog内のPapervision3Dチュートリアルが、終了しましたね。

Yasuさん、お疲れ様でした。そして、ありがとうございました。

今回も以下の記事を参考にさせて頂き、作ってみました。

• フレームアクションで覚える PV3D Vol.05 : Cameraを理解する
• フレームアクションで覚える PV3D Vol.06 : スライドショー

動くCubeのデモを見る

Cameraの設定やステージをドラッグする等の処理は、PV3D Vol.05に。3Dオブジェクトをクリックする処理は、PV3D Vol.06に詳しく書かれていますので、そちらをお読みください。

で、自分でも（機能を）付け足してみようかな？　ということで、以下を実装。

1. Particleを矩形から円へ
2. キーボードの矢印キーで、Cubeを動かす
3. 3Dオブジェクトをクリックしたら、Cubeが拡大＆縮小する

前回のエントリに、ソースを付け加えていった感じですので、Cubeの作成方法＆画像の貼付け等は省略させて頂きます。

Particleの変更

連載記事の方では、Particleは矩形でした。

var particleMat:ParticleMaterial = new ParticleMaterial(0xFFFFFF, 1);

ParticleMaterialクラスを見てみると、三番目の引数を省略すると、初期値は0が適用されるようになっています。

0は矩形になります。

そこで、「形を変えてみるか！」ということで、三番目の引数を1に設定してみました。

var particleMat:ParticleMaterial = new ParticleMaterial(0xFFFFFF, 1, 1);

このように（1と）設定することで、矩形→円に変わってくれます。

キーボードでの操作

//KeyboardEvent.KEY_DOWNを受けての処理
switch (e.keyCode ) {
　　　　case Keyboard.UP:
　　　　　　　　cube.z -= 5;
　　　　　　　　break;
　　　　case Keyboard.DOWN:
　　　　　　　　cube.z += 5;
　　　　　　　　break;
　　　　case Keyboard.LEFT:
　　　　　　　　cube.x += 5;
　　　　　　　　break;
　　　　case Keyboard.RIGHT:
　　　　　　　　cube.x -= 5;
　　　　　　　　break;
　　　　default:
}

ちょっと3D空間でCubeを動かしてみたかったので、こんなことをしてみました。

あまり意味はありません。

クリックしたら拡大＆縮小

//flagを設定しておく
var flg:Boolean = true;

cube.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK,clickHandler);

//Cubeがクリックされた時
function clickHandler(e){
	if(flg == true){
		Tweener.addTween(cube,{scaleX:2,time:1,transition:"easeInOutBounce"});
		Tweener.addTween(cube,{scaleY:2,time:1,transition:"easeInOutBounce"});
		Tweener.addTween(cube,{scaleZ:2,time:1,transition:"easeInOutBounce"});
		mytxt.text = "でっかくなっちゃった！";
		flg = false;
	}else{
		Tweener.addTween(cube,{scaleX:1,time:1,transition:"easeInOutBounce"});
		Tweener.addTween(cube,{scaleY:1,time:1,transition:"easeInOutBounce"});
		Tweener.addTween(cube,{scaleZ:1,time:1,transition:"easeInOutBounce"});
		flg = true;
		mytxt.text = "";
	}
}

最初、拡大＆縮小はこんなコードを書いてました。

import caurina.transitions.properties.DisplayShortcuts;

//TweenerのDisplayShortcutsを使えるようにしておく
DisplayShortcuts.init();
（略）
Tweener.addTween(cube,{_scale:2,time:1,transition:"easeInOutBounce"});

これでパブリッシュしてみると、z方向に拡大してくれませんでした。（そりゃ、そうだ！）

で、どうしたものかと…

とりあえず、「scaleX、scaleYがあるんだから、scaleZもいけるんじゃない？」と思い、試してみたら、上手くいってしまいまして…

で、何故上手くいったのか？　をきちんと理解するため、親のクラスをどんどん遡っていくと…

DisplayObject3Dに_scaleX、_scaleY、_scaleZがありました！

こいつを継承してるから、上手くいったのねぇ…と納得。

ソースを書くだけでなく、継承元のクラスを見ていくときも（FlashIDEだと）辛いですねぇ…

FlashDevelopのありがたみを実感しました。

と、まぁ、PaperVision3Dに詳しくない僕でも、こんなものがサクッと作れるようになったのは、Yasuさんの連載記事のお陰です。

改めまして、ありがとうございました！

今まで何とな～くでやっていたPaperVision3D。

前々から「それでは駄目だなぁ～」とは思っていたんですが、ズルズルとここまで来てしまいました。

ちゃんと勉強しよう！　ということで、基本から勉強し直します。

で、何からやろうかなぁ…と思っていたら、ClockmakerのYasuさんが、『フレームアクションで覚えるPV3D』という連載をされているのを思い出し、そこから始めてみることに…

今回は、Vol.3のMaterialを理解するの記事を元に作ってみました。

BitmapAssetMaterialはYasuさんが記事にされていますので、僕はBitmapMaterialとBitmapFileMaterialで作ってみました。（ただテクスチャ貼って、グルグル回しただけですが…）

• sphereのデモ
• planeのデモ
• paperplaneのデモ
• arrowのデモ
• coneのデモ
• cylinderのデモ
• cubeのデモ

ソースはこんな感じです。（flaファイルの1フレーム目に書いてます）

// フレームアクションでPapervision3D
import org.papervision3d.objects.primitives.*;
import org.papervision3d.materials.*
import org.papervision3d.view.BasicView;
import org.papervision3d.materials.utils.MaterialsList;

// 3D表示用のインスタンスを作成
var world:BasicView = new BasicView();
addChild(world);
world.startRendering();

// 外部ファイルを読み込んで、オブジェクトに貼る
var material:BitmapFileMaterial = new BitmapFileMaterial('●●●●.jpg',true);
//Plane用
material.doubleSided = true;
//一応smoothを
material.smooth = true;

//Cube用（書き方はイロイロある）
var materials:MaterialsList = new MaterialsList();
materials.addMaterial(material,"all");

//Cubeの場合
//var obj:Cube = new Cube(materials,300,300,300);

//Planeの場合
//var obj:Plane= new Plane(material, 300, 300, 1, 1);

//Sphereの場合
//var obj:Sphere = new Sphere(material, 300,15,15)

//Coneの場合
//var obj:Cone= new Cone(material, 200, 300, 1, 1);

//Arrowの場合
//var obj:Arrow= new Arrow(material);

//Cylinderの場合
//var obj:Cylinder= new Cylinder(material, 300, 300,5,5);

//PaperPlaneの場合
var obj:PaperPlane= new PaperPlane(material, 3);

world.scene.addChild(obj);

// EnterFrameの際に呼び出す関数の設定
addEventListener(Event.ENTER_FRAME, loop);

// EnterFrameでのアニメーションを設定します
function loop(e:Event) {
	obj.rotationY += 1;
	obj.rotationX += 1;
}

BitmapMaterialの方は、上記のソースに画像を読み込んでBitmapDataに変換する処理を加えればOK。