Home > papervision3d > TweenerでPapervision3Dのオブジェクトを生きている様に拡大・縮小する

TweenerでPapervision3Dのオブジェクトを生きている様に拡大・縮小する

前回のエントリ「Papervision3DとTweenerを使って画像を滑らかに拡大する」では、画像を貼付けたPlaneを単純に拡大・縮小しました。
今回は、生き物のように拡大と縮小するような動きを付けてみます。

クリックすると各頂点がバラバラに拡大・縮小します。

対象となるオブジェクト

Planeを対象オブジェクトとします。

obj = new Plane(material, size*6/5, size*8/5, segment, segment);

オブジェクトの頂点(vertex)が格納されているプロパティ。

obj.geometry.vertices

配列として格納されていますので、それぞれの位置を移動させる事で拡大・縮小が可能になります。

クリック・イベントハンドラ

オブジェクトをクリックした時のハンドラを登録しておきます。

container.addEventListener(MouseEvent.CLICK, clickObj);

オブジェクト(obj)がクリックされた時にclickObjというメソッドが呼び出されます。

クリック・イベント

イベントハンドラに登録されたclickObjメソッドの実装です。

クリックした時にオブジェクトの頂点を移動させます。

private function clickObj (e:MouseEvent):void {
  for each(var i:* in obj.geometry.vertices) {
    Tweener.addTween(i, { x:i.x*2, 
                          y:i.y*2,
                          z:i.z*2,
                          time:1,
                          delay:Math.random(),
                          transition:"easeInOutElastic"
                        });
  }
}

各頂点についてx、y、zの座標を変更するため、for文でループしています。
実際、頂点は4つですので、このforループは4回転することになります。

Source Code

上記のSWFファイルを生成できるActionScript3.0のソースコードです。

package {
  import flash.display.*;
  import flash.events.*;
 
  import org.papervision3d.core.proto.*;
  import org.papervision3d.scenes.*;
  import org.papervision3d.objects.*;
  import org.papervision3d.cameras.*;
  import org.papervision3d.materials.*;
 
  import caurina.transitions.*;
 
  [SWF(
       backgroundColor="0xffffff",
       frameRate="45"
      )]
 
  public class TweenImage2 extends Sprite
  {
    private var container : Sprite;
    private var scene     : Scene3D;
    private var camera    : Camera3D;
    private var rootNode  : DisplayObject3D;
    private var obj       : DisplayObject3D ; //オブジェクト
    private var size      : int = 100;//オブジェクトの長さ
    private var segment   : int = 1;  //面の分割数
    private var material  : MaterialObject3D;
    private var isTween   : Boolean;
 
    //--------------------------------------------Constructor
    public function TweenImage2():void
    {
      //ステージ
      this.stage.quality   = "MEDIUM";
      this.stage.scaleMode = "noScale";
      this.stage.align = StageAlign.TOP_LEFT;
      this.stage.addEventListener(Event.ENTER_FRAME, loop);
      this.stage.addEventListener(Event.RESIZE, resize);
 
      //コンテナ生成
      container = new Sprite();
      container.x = this.stage.stageWidth  / 2;
      container.y = this.stage.stageHeight / 2;
      addChild(container);
 
      //シーン生成
      scene = new Scene3D(container);
 
      //rootNode生成
      rootNode = new DisplayObject3D("rootNode");
      scene.addChild(rootNode);
 
      //マテリアル設定
      material = new BitmapFileMaterial( "adamrocker.jpg" );
      material.doubleSided = true;
 
      //オブジェクト生成
      obj = new Plane(material, size*6/5, size*8/5, segment, segment);
      rootNode.addChild(obj);
 
      //camera設定
      camera = new Camera3D();
      camera.z = -size*2;
      camera.focus = 300;
      camera.zoom = 1;
 
      //Tweenの状態フラグ
      isTween = false;
 
      //イベントリスナの登録			
      container.addEventListener(MouseEvent.CLICK, clickObj);
    }
 
    //--------------------------------------------loop 
    private function loop(event:Event):void
    {
      // 回転
      obj.rotationY += container.mouseY / 100;
      obj.rotationX += container.mouseX / 100;
 
      //再レンダリング
      scene.renderCamera(camera);
    }
 
    //--------------------------------------------stage
    private function resize(e:Event):void{
      container.x = this.stage.stageWidth  / 2;
      container.y = this.stage.stageHeight / 2;
    }
 
    //--------------------------------------------mouse click	
    private function clickObj (e:MouseEvent):void {
      for each(var i:* in obj.geometry.vertices) {
        if(isTween) {
          Tweener.addTween(i, { x:i.x/2, 
                                y:i.y/2,
                                z:i.z/2,
                                time:1,
                                delay:Math.random(),
                                transition:"easeInOutElastic"
                              });
        } else {
          Tweener.addTween(i, { x:i.x*2, 
                                y:i.y*2,
                                z:i.z*2,
                                time:2,
                                delay:Math.random(),
                                transition:"easeInOutElastic"
                              });
        }
      }
      isTween = !isTween;
      scene.renderCamera(camera);
    }
  }
}
関連のありそうなエントリ

Comments:0

Comment Form
Remember personal info

*
To prove that you're not a bot, enter this code
Anti-Spam Image

Trackbacks:0

Trackback URL for this entry
http://www.adamrocker.com/blog/146/papervision3d_image_expanding_with_tweener.html/trackback/
Listed below are links to weblogs that reference
TweenerでPapervision3Dのオブジェクトを生きている様に拡大・縮小する from throw Life

Home > papervision3d > TweenerでPapervision3Dのオブジェクトを生きている様に拡大・縮小する

Search
Feeds
Meta

Return to page top