2009年02月1日 15:05

【練習】模擬3D視角

米勒‧拾穗
要如何讓靜態圖移動,看起來像立體空間?
根據道路經驗,隨著車身移動,越遠的景物,越不容易移動;越近的物品,則越快掠過視線。近如電線桿,遠至無限遠,如太陽,彷彿不會移動。
利用這個原理,將圖像上的物件依照深度排列,隨著視角移動,給予不同的位移量,就能夠模擬出簡單的立體效果…
米勒《拾穗》

完成結果:(用滑鼠移動水平視角)

  1. 首先將原圖處理成分離的背景和物件,複製其它處的背景填滿空白處。
    拾穗背景
    拾穗人1
  2. 定義每一個物件的z深度,越遠的物件z值越大。
  3. 移動的程度(scale)為:fl/(fl+z),fl(focal length)為眼睛至投影平面的距離。
  4. 以相對於圖像中心點的滑鼠位移量,乘上scale,即為物件的實際位移量。

相關閱讀:

原始碼如下:

// 1, 2, 3 對應到畫中的3個主角(近到遠)
// b表background
var cx:Number = stage.stageWidth/2; // 中心點
var x1:Number = p1_mc.x - cx;
var x2:Number = p2_mc.x - cx;
var x3:Number = p3_mc.x - cx;
var xB:Number = bg_mc.x - cx;

// 定義各物件深度(包括背景)
var z1:Number = 200;
var z2:Number = 650;
var z3:Number = 1000;
var zB:Number = 1600;

var fl:Number = 1000; // 焦點距離
// 預先計算scale
var scale1:Number = fl / (fl+z1);
var scale2:Number = fl / (fl+z2);
var scale3:Number = fl / (fl+z3);
var scaleB:Number = fl / (fl+zB);

addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
function mouseMoveHandler(e:MouseEvent):void {
    var seg:Number = -(mouseX - stage.stageWidth/2)/4;
    p1_mc.x = cx + x1 + seg * scale1;
    p2_mc.x = cx + x2 + seg * scale2;
    p3_mc.x = cx + x3 + seg * scale3;
    bg_mc.x = cx + xB + seg * scaleB;
}


  • esabear 發表於樂多回應(3)引用(0)Flash筆記編輯本文
    樂多分類:網路/3C │昨日人次:0 │累計人次:1176 │標籤:3D,練習
    Ads by Roodo! 

    引用URL

    http://cgi.blog.roodo.com/trackback/8212183

    回應文章

    完成結果沒有顯示耶?
    ---------------------------------------------
    版主回覆:
    yes, 因為原本使用的google空間被轉移了
    所以很多舊文章的swf檔都不正常
    不過我把這篇重新上傳囉
    | 檢舉 | Posted by dORA at 2010年11月24日 11:05
    請問版主一下 如果我還要作個會隨著XY的 變化,有點像空間感的感覺,
    程式碼如合作修改呢?


    我是有試著加過X,但好像不能直接這樣天加,變會成45度
    不知道版主是否有更好的建議
    | 檢舉 | Posted by J at 2011年04月14日 10:44
    板大 我成功調整好XY了 不好意思~
    只是我遇到一個問題是圖片要怎樣才不會超過
    是否可以設定一個範圍?
    ---------------------------------------------
    版主回覆:
    為每一個x及y位移變化量 乘上同一個小於1的權值
    例如: p1_mc.x = cx + x1 + seg * scale1 * 0.5;
    也許可以解決你的問題
    | 檢舉 | Posted by J at 2011年04月14日 11:29