web dimension maker

ちょうど 1年前に色々試していた、本をめくる表現の別解として、PV3D の頂点制御を利用したものを作ってみました。

サンプルのFlashが表示できません。表示させるには、Javascriptをonにするか、最新のFlashPlayerをダウンロードしてください。

インスピレーションの元は下記になります。感謝です!!

• note.x | Papervision3Dメモ #29
• Papervision3Dをやってみた23: 鮭とプログラムとか

先にお仕事で使ったものなので、ASファイルを晒せないです。ので、簡単な仕組みは下記になります。

• 1. Plane を 2枚重ねて、1つの DisplayObject3D を作る。
• 2. それを rotationY で回転させると同時に、頂点を制御して雰囲気を出している。

2 の部分は下記のような感じです。頂点を 1 列づつ、Z 軸方向に動かしてます。かなり力技だったり、効率が悪そうな書き方で恥ずかしいです。ちなみに、Tweener 使ってます。

// 1 ページを右から左にめくるときの例です。
// t:めくるスピード, d:めくる間隔
public function turnUp(t:int, d:Number):void
{
  // めくる（めくった後のZ位置）
  Tweener.addTween(表裏一枚のDisplayObject3D, { rotationY:180, time:t, delay:d } );
  
  // 頂点のモーション
  var numVertices:int = int(表のPlane.geometry.vertices.length / (セグメント数 + 1));
  for (var i:int = 0; i < numVertices; i++) 
  {
    // 計算用の擬似 Object
    var obj:Object = { };
    obj.theta = 0;
    
    var frontVertices:Array = 表のPlane.geometry.vertices.slice(i * (セグメント数 + 1), i * (セグメント数 + 1) + セグメント数 + 1);
    var backVertices:Array = 裏のPlane.geometry.vertices.slice(i * (セグメント数 + 1), i * (セグメント数 + 1) + セグメント数 + 1);
    
    Tweener.addTween(obj, { theta:Math.PI, time:t, delay:d, transition:"easeOutQuint", onComplete:completed, onUpdate:tweenVertices, onUpdateParams:[ frontVertices, backVertices, obj, i ] } );
  }
  
}


// アップデート
private function tweenVertices(frontVertices:Array, backVertices:Array, obj:Object, n:int):void
{
  sinTheta = Math.sin(obj.theta);
  
  var numVertices:int = int(frontVertices.length);
  for (var i:int = 0; i < numVertices; i++) 
  {
    // 各頂点の最大Z位置×サインシータ
    frontVertices[i].z = - 40 * Math.sin(Math.PI / セグメント数 * n) * sinTheta;
    backVertices[i].z = - frontVertices[i].z;
  }
  
  this.filters = [new BlurFilter(16 * sinTheta, 0)];
}


// 1列 終わったら
private function completed():void 
{
  count++;
  
  // セグメント数 + 1 列の頂点が終わったら
  if (count == セグメント数 + 1)
  {
    // 1ページめくるモーションの終了
    dispatchEvent(new Event(Event.COMPLETE));
  }
}

PV3D の未来もどうなるかわかりませんし、FP10 の機能で出来そうな感じがするので、今度はそれに挑戦してみたいと思います。