2/15 Wonderflで見かけた良サンプルメモ
PV3Dその3というPapervision3Dを使ったかっこいいサンプルがありましたので、今日はこれを勉強していきたいと思います。
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を使って整列させています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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; } } |
extra.xはディフォルトの文字配列の位置を表しています。
文字列の初期位置は最初のTweenerで配置をされていますが、その配置をする前のディフォルトの値がexxtra.xになります。
yの座標は文字配列によって少し違いますが（words1.y = 50,words2.y =0 , words3.y = -50)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | 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()}); } } |
フィルターを利用
・ ViewportLayerを利用すれば、フィルターを利用できます。
・ cameraとsceneとの距離とdistance（cameraの位置を決めている値）を４０で割った数字）カメラとsceneの距離が近ければぼかしを少なくしている。逆に遠いとぼかしも多い。
1 2 3 | var vpl:ViewportLayer=word.createViewportLayer(viewport, true); var d:Number=Math.abs(DistanceFromCamera(word) - distance) / 40; vpl.filters=[new BlurFilter(d, d, 1)]; |
Math.ads () 絶対値を返します。
Math.sprt() 平方根を返します。
sceneについてはclockmakerさんのサイトを参考に。3D座標軸（ｘ、ｙ、ｚ）の値を表しています。
BlurFilter(a,b,c);
a：水平方向のぼかし量
ｂ：垂直方向のぼかし量
ｃ：ぼかしの実行回数
