papervision3D 2.X EX.05 Planeにクリックしたら「ニュル」っと滑らかに動かすTweener | 東京都世田谷区 ホームページ制作 [k]id

papervision3D 2.X EX.05 Planeにクリックしたら「ニュル」っと滑らかに動かすTweener

Category Flash Tips,Papervision3Dを試す Update 2009.05.07

twitterfacebookgoogle+はてなブックマークPocketであとで読むfeedlyで購読

前回の「クリックしたら移動」を滑らかに動かしてみたいと思います

今回滑らか動作を実現する為に使用するのはTweener
数多くの方がTweenerに関しては説明をされているので、今回はさらっと、、、、

このTweenerはAS3などでモーションなどを滑らかにするために使用できるLibで
たとえばpapervision3Dでは

Tweener.addTween(対象, {x:X軸の場所, y:Y軸の場所, z:Z軸の場所, time:時間で動かすか});

みたいな感じで「ニュル」っと感を実装できるLibです。

さて、では具体的には
Tweenerでtweener_1_31_74_as3.zipをダウンロードし(09.05.03現在)PV3DのLibraryを格納している[org]フォルダと同じとこに[caurina]を配置で準備完了!
(難しい事は考えないようにしましょう)

それで
前回のファイルに追加する項目はimportにとりあえず先程のクラスを追加

import caurina.transitions.Tweener;

さらに
クリックしたときのイベント

planeA.x = Math.random() * 200-100;

Tweener.addTween(planeA, {x:Math.random() * 200-100, y:planeA.y, z:planeA.z, time:1});

に変更するだけ

[embedSWF]http://kidokorock.com/wp-content/uploads/2009/05/plane_move2.swf[/embedSWF]
サンプル

ソースは↓です。

package {
import flash.display.Sprite;
import flash.events.Event;
//------------------------------------------------------------
//                                             クラス読み込み
import org.papervision3d.core.geom.Lines3D;
import org.papervision3d.core.geom.renderables.Line3D;
import org.papervision3d.core.geom.renderables.Vertex3D;
import org.papervision3d.materials.special.LineMaterial;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;
//Plane オブジェクトのクラスを追加
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.materials.special.CompositeMaterial;
import org.papervision3d.materials.WireframeMaterial;
import org.papervision3d.materials.ColorMaterial;
//クリックイベントを有効
import org.papervision3d.events.InteractiveScene3DEvent;
import caurina.transitions.Tweener;
[SWF(backgroundColor="#ffffff")];
public class Main extends Sprite {
//------------------------------------------------------------
//                                                    変数定義
private var lines3D:Lines3D;
private var viewport:Viewport3D;
private var scene:Scene3D;
private var camera:Camera3D;
private var renderer:BasicRenderEngine;
private var rootNode:DisplayObject3D;
public function Main() {
//------------------------------------------------------------
//                                         カメラ視点等の定義
viewport=new Viewport3D(0,0,true,true);
scene=new Scene3D  ;
camera=new Camera3D  ;
renderer=new BasicRenderEngine  ;
rootNode=scene.addChild(new DisplayObject3D("rootNode"));
//
addChild(viewport);
camera.zoom=1;
camera.focus=1000;
camera.x=200;
camera.y=200;
camera.target=DisplayObject3D.ZERO;
//------------------------------------------------------------
//                              ラインを投影するための変数定義
//[X座標の線]
var X_line:Line3D;
var X_strV:Vertex3D;
var X_endV:Vertex3D;
var X_lineM:LineMaterial=new LineMaterial(0xFF0000,0.2);
//[Y座標の線]
var Y_line:Line3D;
var Y_strV:Vertex3D;
var Y_endV:Vertex3D;
var Y_lineM:LineMaterial=new LineMaterial(0x00FF00,0.2);
//[Z座標の線]
var Z_line:Line3D;
var Z_strV:Vertex3D;
var Z_endV:Vertex3D;
var Z_lineM:LineMaterial=new LineMaterial(0x0000FF,0.2);
//
lines3D=new Lines3D  ;
scene.addChild(lines3D);
//
//------------------------------------------------------------
//                                                   X座標の線
X_strV=new Vertex3D(-1000,0,0);
X_endV=new Vertex3D(1000,0,0);
X_line=new Line3D(lines3D,X_lineM,2,X_strV,X_endV);
lines3D.addLine(X_line);
//------------------------------------------------------------
//                                                   Y座標の線
Y_strV=new Vertex3D(0,-1000,0);
Y_endV=new Vertex3D(0,1000,0);
Y_line=new Line3D(lines3D,Y_lineM,2,Y_strV,Y_endV);
lines3D.addLine(Y_line);
//------------------------------------------------------------
//                                                   Z座標の線
Z_strV=new Vertex3D(0,0,-1000);
Z_endV=new Vertex3D(0,0,1000);
Z_line=new Line3D(lines3D,Z_lineM,2,Z_strV,Z_endV);
lines3D.addLine(Z_line);
//------------------------------------------------------------
//                                    Plane オブジェクトを追加
//↓pMatというマテリアルを定義(マテリアルはテクスチャみたいなもんかな)
var pMat:CompositeMaterial = new CompositeMaterial();
//↓pMatにワイヤーフレームの要素を追加
pMat.addMaterial(new WireframeMaterial(0x000000));
//↓pMatに色の要素を追加
pMat.addMaterial(new ColorMaterial(0xff0000));
//↓pMatに裏面に色をつける
pMat.doubleSided = true;
//マテリアルに対してクリックイベントを有効にするためにinteractiveをtrueに
pMat.interactive=true;
//↓新たにplaneBという名前でplaneを定義して
new Plane(pMat, 100, 100, 6, 6);
//new Plane(マテリアルを設定 , 縦 , 横 , 横の分解数, 縦の分解数)
//という感じでPlaneを設定
var planeA:Plane = new Plane(pMat, 100, 100, 6, 6);
//ここでlines3Dに追加する
lines3D.addChild(planeA);
//クリックイベントを追加
planeA.addEventListener(InteractiveScene3DEvent.OBJECT_CLICK, onClickHandler);
addEventListener(Event.ENTER_FRAME,onFrame);
}
public function onFrame(e:Event):void {
//------------------------------------------------------------
//                               マウスの座標でZ軸を基点に回転
lines3D.yaw((mouseX - (stage.stageWidth / 2)) / (stage.width / 2) * 5);
renderer.renderScene(scene,camera,viewport);
}
private function onClickHandler(e:Event) {
var planeA:Plane=Plane(e.target);
Tweener.addTween(planeA, {x:Math.random() * 200-100, y:planeA.y, z:planeA.z, time:1});
}
}
}
ページトップへ