2/15 Wonderflで見かけた良サンプルメモ

  • |
   

PV3Dその3というPapervision3Dを使ったかっこいいWonderflがありましたので、今日はこれを勉強していきたいと思います。


Viewport3D

Viewport3D{
viewportWidth:Number = 640,
viewportHeight:Number = 480,
autoScaleToStage:Boolean = false,
interactive:Boolean = false,
autoClipping:Boolean = true,
autoCulling:Boolean = true
)

camera.target = DisplayObject3D.ZERO; カメラのターゲットを原点に向けている

cameraについて

* X,Y,Z座標:3D空間の配置する場所を設定
* focus : 焦点距離(値が小さいほど広角)
* zoom : ズーム(値が大きいほど拡大)

Text3Dクラス

var word:Text3D = new Text3D(“文字列” , font ,material);
使い方
Letter3DMaterialを使い,matrialを作成する。var material:Letter3DMaterial = new Letter3DMaterial();
マテリアルの裏側も表示させる場合はdoubleSidedをtrueにしておきます。
interactiveは相互に作用する

extraプロパティ(動的に自由な値を入れることのできる変数)

この関数で文字をランダムな位置に配置してそれをextraプロパティにとっておくと思われ

Tweener.addTween

Tweener,addTween(対象オブジェクト、{ パラメータ:値、time:秒数 , delay:秒数} );

setInterval( timer, 1000 ); 一秒ごとにtimer関数を実行

バラバラになっている文字列をTweenerを使って整列させています。
[cc lang=”actionscript”]
private function resetWords(words:Text3D):void
{
for each(var word:DisplayObject3D in words.letters)
{
Tweener.addTween(word,
{x:word.extra.x,
y:word.extra.y,
z:word.extra.z,
rotationX:0,
rotationY:0,
rotationZ:0,
time:1,
transition:”easeOutBounce”,
delay:delayTime});

Tweener.addTween(word,
{rotationY:720,
time:1,
delay:delayTime + 2});
delayTime+=0.1;
}
}
[/cc]

extra.xはディフォルトの文字配列の位置を表しています。
文字列の初期位置は最初のTweenerで配置をされていますが、その配置をする前のディフォルトの値がexxtra.xになります。
yの座標は文字配列によって少し違いますが(words1.y = 50,words2.y =0 , words3.y = -50)

[cc lang=”actionscript”]
private function breakWords(words:Text3D):void
{
for each(var word:DisplayObject3D in words.letters)
{
Tweener.addTween(word,
{x:Math.random() * 2000 – 1000,
y:Math.random() * 2000 – 1000,
z:Math.random() * 2000 – 1000,
rotationX:Math.random() * 360,
rotationY:Math.random() * 360,
rotationZ:Math.random() * 360,
time:4,
delay:3 * Math.random()});
}
}
[/cc]

フィルターを利用

・ ViewportLayerを利用すれば、フィルターを利用できます。
・ cameraとsceneとの距離とdistance(cameraの位置を決めている値)を40で割った数字)カメラとsceneの距離が近ければぼかしを少なくしている。逆に遠いとぼかしも多い。

[cc lang=”actionscript”]
var vpl:ViewportLayer=word.createViewportLayer(viewport, true);
var d:Number=Math.abs(DistanceFromCamera(word) – distance) / 40;
vpl.filters=[new BlurFilter(d, d, 1)];
[/cc]

Math.ads () 絶対値を返します。
Math.sprt() 平方根を返します。
sceneについてはclockmakerさんのサイトを参考に。3D座標軸(x、y、z)の値を表しています。

BlurFilter(a,b,c);
a:水平方向のぼかし量
b:垂直方向のぼかし量
c:ぼかしの実行回数

Related Posts Plugin for WordPress, Blogger...