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:ぼかしの実行回数