Papervision3D [2]

Papervision3D

前回、Papervision3D 2.0を触ってみる、という記事を書いて、
実質、ダウンロードしただけ、という感じでしたが、今回はいよいよ本題、触ってみる！

と、思ったんですが、いきなり2.0はきつかったです、、。

色々とググってみたのですが、2.0の記事は、当たり前かもしれませんが、
だいたいが新しく出た2.0を触ってみる、という感じで、一から説明してくれているものがありませんでした、、（完全に他力本願w）

なので、バージョン1.xの解説記事でまずは、Papervision3Dに慣れてから、2.0に移行、としていきたいと思います。

そんなわけで、さっそく触ってみたんだけれども、最初はここでじっくり説明しようかとも思ったけど、
他の方が解説しておられる記事がたくさんあるんで、解説はそちらにまかせます。
そっちのほが詳しいし。僕もそれで勉強しました。

参考にさせてもらったサイト：
・throw Life
・note.x
あと、これは2.0ですが、、
・FlaTech+

throw Lifeさんのところは、この記事から順番に勉強させて頂きました。
基本的なところは学べると思います。ありがたいです。

で、一枚の平面（プレーン）を回すところから始めて、最終出来上がったのが、これ。

Papervision3D

※キューブをクリックするとウニウニと小さくなります。
※！！win IEで見ると表示されない不具合が発生中です！！
また対処します、、。
追記：IEで表示はされるのですが、場所が画面の中央に表示されず、スクロールしないと見えない状態、となってます、、。対処の仕方がわかりません、、。

ソースはこちら。
※Tweenerが必要です。
追記：古いバージョンでのソースとなってます。たぶん、ver.1.1。
1.7でも動きませんでした、、。マテリアル関係が変更になっている模様。

PLAIN TEXT
ACTIONSCRIPT:
  1. package  {
  2.    
  3.     import flash.display.*;
  4.     import flash.events.*;
  5.  
  6.     import org.papervision3d.scenes.*;
  7.     import org.papervision3d.objects.*;
  8.     import org.papervision3d.cameras.*;
  9.     import org.papervision3d.materials.*;
  10.    
  11.     import caurina.transitions.*;
  12.    
  13.     public class Cube extends Sprite {
  14.         //_____________________________________________________________
  15.         //                                               vars
  16.        
  17.         private var container:Sprite;
  18.         private var scene:Scene3D;
  19.         private var rootNode:DisplayObject3D;
  20.         private var wireFrame:WireframeMaterial;
  21.         private var colorMate:ColorMaterial;
  22.         private var compoMate:CompositeMaterial;
  23.         private var planeSize:int = 150; //一片の大きさ
  24.         private var segment:int = 8; //一片の分割数（セグメント）
  25.         private var planeObj:DisplayObject3D; //平面
  26.         private var camera:Camera3D;
  27.        
  28.         private var isTween:Boolean = true;
  29.        
  30.         //_____________________________________________________________
  31.         //                                               Constractor
  32.         public function Cube() {
  33.             container = new Sprite;
  34.             container.x = stage.stageWidth / 2;
  35.             container.y = stage.stageHeight / 2;
  36.             stage.addChild(container);
  37.            
  38.             scene = new Scene3D(container);
  39.            
  40.             rootNode = new DisplayObject3D();
  41.             scene.addChild(rootNode);
  42.            
  43.             wireFrame = new WireframeMaterial(0xFFFFFF);
  44.             colorMate = new ColorMaterial(0x666666, 0.2);
  45.             colorMate.doubleSided = false;
  46.            
  47.             compoMate = new CompositeMaterial();
  48.             compoMate.addMaterial(wireFrame);
  49.             compoMate.addMaterial(colorMate);
  50.            
  51.             planeObj = new Cube(compoMate, planeSize, planeSize, planeSize, segment, segment, segment);
  52.             rootNode.addChild(planeObj);
  53.            
  54.             camera = new Camera3D();
  55.             camera.z = -planeSize;
  56.             camera.focus = 500;
  57.             camera.zoom = 1;
  58.            
  59.             stage.addEventListener(Event.ENTER_FRAME, loop);
  60.             container.addEventListener(MouseEvent.CLICK, CLICK);
  61.         }
  62.        
  63.         //_____________________________________________________________
  64.         //                                               loop
  65.         private function loop(event:Event):void {
  66.             //回転
  67.             planeObj.rotationY += 1;
  68.             planeObj.rotationX += 1;
  69.             //レンダリング
  70.             scene.renderCamera(camera);
  71.         }
  72.        
  73.         //_____________________________________________________________
  74.         //                                               CLICK
  75.         private function CLICK(event:MouseEvent):void {
  76.             //肝はココ
  77.             //.geometry.verticesに、配列で各頂点の情報が入っているよう。
  78.             //各頂点が配列になってるので、その数だけ、for each..inでループ
  79.             for each(var i:Object in planeObj.geometry.vertices) {
  80.                 if (isTween) {
  81.                     //x,y,zをそれぞれいっぺんに動かす。delayをランダムにしてるので、ウニウニっとなる。
  82.                     Tweener.addTween(i, { x:i.x / 2, y:i.y / 2, z:i.z/2, time:1, delay:Math.random(),
  83.                                         transition:"easeInOutElastic" } );
  84.                 } else {
  85.                     Tweener.addTween(i, { x:i.x*2, y:i.y*2, z:i.z*2, time:1, delay:Math.random(),
  86.                                         transition:"easeInOutElastic" } );
  87.                 }
  88.             }
  89.             isTween = !isTween;
  90.             scene.renderCamera(camera);
  91.         }
  92.     }
  93.    
  94. }

ほぼ、throw Lifeさんのところの、「TweenerでPapervision3Dのオブジェクトを生きている様に拡大・縮小する」のソースのまま、です。
そこでは平面の頂点を拡大していますが、それをキューブでやるとどうなるんだろう？
と思って、やってみると、意外と面白い動きしました。四隅の頂点だけかと思いきや、フレームが交差してるところ全てが拡大縮小するんでこんな動きになるんですね。

実際に使ってみた感想としては、とにかく、すごい。
まだほとんどAS3もわからない状態でも、少し書いてみるだけですぐ、3Dになる。
これは面白い！

Papervision3D 2.0では、光源を追加して、ライトのレンダリングが出来たり、と、ますますFlash内で3Dを作れるようになっているみたいなので、是非挑戦したい。
その辺のことは、note.xさんが詳しいです。すごいです。

2.0てわけじゃないけど、これなんかすごい！こ、このキャラは！w(ソースした、こんなもの、のリンク)
いやー、面白い。

話は変わるけど、今回、このサンプルのswfを貼付けるのに、ページ遷移させるのもなんだかなー、と思って、
他のブログとかでちょくちょく見かけるLightBox風の処理にしてみた。
ShadowBoxってのを使いました。
また、設定方法なんかは、そのうち解説（ってほどもないけど）してみたいと思います。

About this entry

Published:
4.9.08 / 12am
Category:
apple, flash
Tags:
« | »