さらに続けて、zupko.infoから影を作るTipsです。
これも続けて作りたい！作ろう！
→サイトはこちら
« funny | メイン | tutorial »
zupko.infoにてPV3Dで反射のTipsが載っていました。
この反射かっこいいな〜。作りたい。作ろう！
→サイトはこちら
SVNで、PV3Dのライブラリを更新したら、どうやらライブラリが少し変わったみたいで、いままで作っていたPV3Dのファイルが表示されない。
特にエラーが出てるわけではなく、単にレンダリングされないだけだったので、動いてるソースと見比べてみると、どうもカメラの設定が足りないみたい。
自分のソース内のカメラ設定部分に
camera.target = DisplayObject3D.ZERO;
を追加してみたところ、無事レンダリングされました。
カメラのターゲットを指定しろってことか〜。でもZEROってなんだろう？
いつからそうなんだろう？
日本語で訳してくれているサイトがあったのでペタリ。
参考：鮭とプログラムとか
→サイトはこちら
WOW Engineという3D物理エンジンライブラリとこの前のSound Spectrumを足すと面白いかな〜と思って作ってはみたものの、なんか違うな〜。単にボックスにSound Spectrumの値を入れただけだから物足りない。
Vertexごとに値を割り当てて、ガビガビしたのに合わせて、中の球をポンポン動かしたかったんだけども。。。
もうちょい調べよ〜。
Tutorialなど
ActionScript3用3D物理エンジンライブラリ「WOW-Engine」
参考サイト
shirotokoro：WOW-Engine
ミカン日記：WOWEngineを使ってみた
[Papervision3D]PV3D + WOW Engine
→微妙なサンプルはこちら
とりあえず第２弾。
テクスチャとライトを設置してみた。
あと、えらく波形がビリビリなるので、参考サイトをまねて、半球で見易くしてみた。
それで、一番の問題としては、Sound Spectrumで音が出ない、波形が動かない、という事があったんですが、
同じブラウザで裏で音のなるFlashサイトを見ていた場合、画面がフリーズしてしまいました。
なんでそうなるのかな〜と検索してるとそんな記事を書いていた方がいました。
イベントとかで使う分には行けそうですね。
リアルタイムにはできないのかな〜。
参考
Papervision3D & SoundMixer
AS3のSoundMixer.computeSpectrumの問題点と対処法
SoundMixer.computeSpectrum() stretchFactor変化デモ
AS3:タイムライン再生の音の波形スナップショットが取れない
SoundMixer.computeSpectrum() マイクの音はキャプチャされない
→サイトはこちら
PV3DのプリミティブとSound Spectrumで取得したmp3の波形データを使い、
プリミティブをビリビリさせてみました。
結構楽しい。単純な形なのにmp3を変えるだけで全然違う。
もっと作り込もう。
帯と球の２種類作ってみました。
２つプリミティブが回っていますが、どっちかがLでどっちかがRのステレオ版です。
流れている曲はお友達のLili Hirakawaさんに作ってもらいました。ありがと〜。
注：いきなり音が出ます。
PV3Dのバージョンが2.0になってから、少しレンダリングの方法が変わったので、忘れないようにメモメモ。
おでんおでん。
「PV3D_Basic.as」というファイルを作り、中に以下のコードを書く。
立方体だけぐるぐる回っています。
立方体のマテリアルは面ごとに設定しないとエラーになっちゃうみたい。
んで、これを新規で作ったflaファイルのプロパティのドキュメントクラスに「PV3D_Basic」と書いてパブリッシュすればおでんのできあがり。
おでんおでん。
「PV3D_Basic.as」というファイルを作り、中に以下のコードを書く。
package {
import mx.core.UIComponent;
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.core.proto.MaterialObject3D;
import org.papervision3d.cameras.FreeCamera3D;
import org.papervision3d.view.Viewport3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.materials.ColorMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.utils.MaterialsList;
import org.papervision3d.objects.primitives.*;
public class PV3D_Basic extends Sprite {
private var container:Sprite;
private var vp:Viewport3D;
private var scene:Scene3D;
private var camera:FreeCamera3D;
private var rootNode:DisplayObject3D;
private var rdr:BasicRenderEngine;
//プリミティブの定義
private var cube:Cube;
private var sphere:Sphere;
private var cylinder:Cylinder;
private var cone:Cone;
private var plane:Plane;
public function PV3D_Basic() {
//初期化
init();
}
private function init():void{
init3D();
rootNode.addChild(mkCube(0,-175,0)); //立方体を作る
rootNode.addChild(mkSphere(0,0,0)); //球を作る
rootNode.addChild(mkCylinder(0,-100,0)); //シリンダーを作る
rootNode.addChild(mkCone(0,100,0)); //円錐を作る
rootNode.addChild(mkPlane(0,0,0)); //板を作る
//繰り返し処理
addEventListener(Event.ENTER_FRAME,expEnterFrame);
}
private function init3D():void {
//スプライト作成
container=new Sprite ;
addChild(container);
//ビューポート作成
vp=new Viewport3D(stage.stageWidth,stage.stageHeight,true,true);
container.addChild(vp);
//シーン作成
scene=new Scene3D;
//レンダラー作成
rdr=new BasicRenderEngine;
//カメラ作成
camera =new FreeCamera3D;
camera.zoom =3;
camera.focus =300;
//ルートノード
rootNode=scene.addChild(new DisplayObject3D("rootNode"));
}
//レンダリング
public function expEnterFrame(e:Event):void {
cube.rotationY += 10;
rdr.renderScene(scene,camera,vp);
}
//立方体
private function mkCube(xPos,yPos,zPos):DisplayObject3D {
var wireMat:WireframeMaterial=new WireframeMaterial();
wireMat.lineAlpha=.5;
var colMat:ColorMaterial = new ColorMaterial( 0xff00ff ,.8);
colMat.oneSide=false;
colMat.lineColor=0xFFFF00;
var cubeMat:MaterialsList = new MaterialsList({
front :colMat,
back :wireMat,
right :wireMat,
left :wireMat,
top :wireMat,
bottom :wireMat
});
var w:Number =50; //幅
var h:Number =50; //高さ
var d:Number =50; //奥行き
var segmentsS:Number =2; //横面分割数
var segmentsT:Number =4; //奥行き分割数
var segmentsH:Number =8; //縦面分割数
var insideFaces:int =0; //裏返す面の指定？
var excludeFaces:int =0; //非表示する面の指定？
var initObject:Object =null;
cube=new Cube(cubeMat,w,d,h,segmentsS,segmentsT,segmentsH,insideFaces,excludeFaces,initObject);
cube.x=xPos;
cube.y=yPos;
cube.z=zPos;
return cube;
}
//球体
private function mkSphere(xPos,yPos,zPos):DisplayObject3D {
var sphereMat:MaterialObject3D = new WireframeMaterial();
var radius:Number =50; //半径
var segmentsW:int =8; //横の分割数
var segmentsH:int =6; //縦の分割数
var initObject:Object =null;
sphere=new Sphere(sphereMat,radius,segmentsW,segmentsH,initObject);
sphere.x=xPos;
sphere.y=yPos;
sphere.z=zPos;
return sphere;
}
//シリンダー
private function mkCylinder(xPos,yPos,zPos):DisplayObject3D{
var cylinderMat:MaterialObject3D = new WireframeMaterial();
var radius:Number =50; //半径
var h:Number =100; //高さ
var segmentsW:int =8; //横の分割数
var segmentsH:int =6; //縦の分割数
var topRadius:Number =-1; //上面の半径
var topFace:Boolean =true; //上面の表示／非表示
var bottomFace:Boolean =true; //下面の表示／非表示
var initObject:Object =null;
cylinder = new Cylinder(cylinderMat,radius,h,segmentsW,segmentsH,topRadius,topFace,bottomFace,initObject);
cylinder.x=xPos;
cylinder.y=yPos;
cylinder.z=zPos;
return cylinder;
}
//円錐
private function mkCone(xPos,yPos,zPos):DisplayObject3D{
var coneMat:MaterialObject3D = new WireframeMaterial();
var radius:Number =100;
var h:Number =100;
var segmentsW:int =8;
var segmentsH:int =6;
var initObject:Object =null;
cone = new Cone(coneMat,radius,h,segmentsW,segmentsH,initObject);
cone.x=xPos;
cone.y=yPos;
cone.z=zPos;
return cone;
}
//板
private function mkPlane(xPos,yPos,zPos):DisplayObject3D{
var planeMat:MaterialObject3D=new WireframeMaterial();
var w:Number=400;
var h:Number=400;
var segmentsW:Number=3;
var segmentsH:Number=2;
var initObject:Object=null;
plane = new Plane(planeMat,w,h,segmentsW,segmentsH,initObject);
plane.x=xPos;
plane.y=yPos;
plane.z=zPos;
return plane;
}
}
}
レンダリング時（表示時）にsceneとcameraとviewportを設定しないとダメみたい。たぶん。立方体だけぐるぐる回っています。
立方体のマテリアルは面ごとに設定しないとエラーになっちゃうみたい。
んで、これを新規で作ったflaファイルのプロパティのドキュメントクラスに「PV3D_Basic」と書いてパブリッシュすればおでんのできあがり。
PV3Dのコンテストがあるそうです。
サイトを送ればいいのかな？
→サイトはこちら
Papervision3Dを使って、トラックを矢印キーでぐるんぐるん走らせることができる「spec5zigen」のサイトです。
IK（インバースキネマティクス）を使って、荷台がボディに着いて来るようになっています。
バックでめり込んだりしちゃいますが、そこはこれから直すという事で。
→サイトはこちら
地球をドラッグすることで、ごろごろころがるPV3Dのマウスストーカーみたいな感じの「Dragging in 3D」です。
ライティングが綺麗です。
→サイトはこちら
MAXから書き出したCollada形式のDAEファイルを複数読み込みをしていたんですが、
なかなか表示しないので、調べてみた所、リスナーを付けて、順番に読み込んであげなきゃいけないみたい。
まずはクラスをインポート
参考サイト：pv3d.org
なかなか表示しないので、調べてみた所、リスナーを付けて、順番に読み込んであげなきゃいけないみたい。
まずはクラスをインポート
import org.papervision3d.events.FileLoadEvent; import org.papervision3d.objects.parsers.DAE;その後、DAEの読み込みとリスナーを追加
private function hoge(){
var dae:DAE = new DAE();
dae.load("hoge/hoge.dae");
//リスナー追加
dae.addEventListener(FileLoadEvent.LOAD_COMPLETE,onDAE_Loaded);
}
private function onDAE_Loaded(event:FileLoadEvent){
trace(event.type); //読み込めたらloadCompleteと出る
}
参考サイト：pv3d.org
前回のMorph3Dから更にいろんなモーフィングができてます。モーフィングの描画方法も変更可能。
コミカルな動きとPV3Dをうまく組み合わせてとても気持ちのいいサイトになっているTBWAのサイト
→サイトはこちら
Coca colaのブラジルサイトにあるPV3Dを使ったボクシングゲームです。
msnbcのニュースをビジュアル的に見せてくれるサイト「Spectra」です。
PV3Dをふんだんに使ったAudi RS 6のサイト動画もすごい！
3D studio maxで書き出したデータをPV3Dにてトレースアニメーションするサンプルのようです。
colorから色も選べます。
→リンクはこちら
Papervision 3Dで3Dメガネをかけてみると、立体っぽく見えるデモです。メガネがないとなんだかよくわかりませんが、かけてみると面白いです。
コンポーネントも落とせるみたいです。
→リンクはこちら
前回はDAEファイルのボディ部分にUV情報がなかったので、変なマッピングになってしまったのを、今回はボディにUV情報を入れてDAEを書き出し、テクスチャを貼ってみました。
使った画像は全部で６枚。
下の画像がまとめたものです。左のバラバラになっているのがボディのUVマップ。こんな感じで書き出されると、なんだかプラモのパーツを思い出します。そして右の５枚の画像はそれぞれウィンドウ、ヘッドランプ、エアロ、タイヤ、リアランプのテクスチャになります。
実際にテクスチャを貼ったpv3dは以下から。
※注意：テクスチャやらdaeファイルやらを読み込むため、少しローディングに時間がかかるかもしれません。
使った画像は全部で６枚。
下の画像がまとめたものです。左のバラバラになっているのがボディのUVマップ。こんな感じで書き出されると、なんだかプラモのパーツを思い出します。そして右の５枚の画像はそれぞれウィンドウ、ヘッドランプ、エアロ、タイヤ、リアランプのテクスチャになります。
実際にテクスチャを貼ったpv3dは以下から。※注意：テクスチャやらdaeファイルやらを読み込むため、少しローディングに時間がかかるかもしれません。
→リンクはこちら
ようやくPV3DにてDAEファイルの読み込みが出来たので、このままテクスチャも貼っちゃいたくなっていろいろ調べたときの備忘録。
STEP.1【DAEファイルの書き出し】
・MAXを使い、DAEを書き出す。その際Materialの名前やテクスチャの名前を英語で付けておく。
・テクスチャ等を既にMAX上で設定している場合、リンクが絶対パスになるので、テキストエディタかなにかでDAEファイルを開き、「C:\〜」から始まるテクスチャファイルを指定している場所を探し、自分の環境に合わせて、相対パスで書き直す。
STEP.2【Flash CS3からDAEファイルを読み込む】
・DAEの読み込み方がさっぱりわからなかったので、mrdoobさんのサイトにあったsourceを拝借。daeと書いてる部分を書き直したら一応読み込んだ。
STEP.3【テクスチャの無いマテリアルに色を付ける】
テクスチャが無い部分に関しては、ワイヤーフレーム表示になってしまうので、Flash内で生成することに。
まず、MAXで付けたMaterialの名前を探すため、一度ムービープレビューをしてみる。
「出力パネル」で「not found」と出ているMaterial名っぽいものが出るので、MaterialListに登録する。
Papervision3Dやってみる(4) 【マテリアル】を参考に書き書き。
//ベタ色設定
var Ymaterial : ColorMaterial = new ColorMaterial( 0xffff00 ,.8);//黄色でべた塗り,アルファ値（0〜1）
Ymaterial.oneSide = false; //裏のポリゴンに色をつけるかどうか
STEP.4【複数のテクスチャを重ねる】
ベタ色を付けると凹凸がなくなってしまうので、とりあえず下地を残して上に別のテクスチャ貼ることに。
CompositeMaterialというのが複数テクスチャを貼れるみたいです。
note.xさんとmoriBlogさんのサイトを参考に書き書き。
なんとか重ねて表示までできました。
【その他参考にしたサイト】
・ラジオシティ風レンダーベイキング
・レンダーベイキングってなんだ？
・Collada形式の３Ｄモデルを読み込む
サイコロをPV3Dに表示する場合。
3dsMAXでシステム単位inch ディスプレイ単位mmにおいてサイコロのサイズ20mm×20mm。
flash developでflex通してパス設定。
PV3D1.5のパスがproject class pathで設定しても出来なかったのでflex_sdk_2_hf1.frameworks.sourceの中にPV3Dのorg, com, flファイルをコピーし、frameworks内のflex-config.xmlを編集。
こんな感じ。
<source-path>
<path-element>locale/{locale}</path-element>
<path-element>source/</path-element>
</source-path>
DAEサイコロのPV3Dソース参考サイト。サイトはこちら
DAEファイルとgifファイルはmain.asと同じ階層に入れておく。
3dsMAXでシステム単位inch ディスプレイ単位mmにおいてサイコロのサイズ20mm×20mm。
flash developでflex通してパス設定。
PV3D1.5のパスがproject class pathで設定しても出来なかったのでflex_sdk_2_hf1.frameworks.sourceの中にPV3Dのorg, com, flファイルをコピーし、frameworks内のflex-config.xmlを編集。
こんな感じ。
<source-path>
<path-element>locale/{locale}</path-element>
<path-element>source/</path-element>
</source-path>
DAEサイコロのPV3Dソース参考サイト。サイトはこちら
DAEファイルとgifファイルはmain.asと同じ階層に入れておく。
Blogged with Flock
