伊沙熊的學習筆記本:【練習】模擬3D視角

<< 【介紹】在Flash中使用Google Maps API | 回blog首頁 | 處世四態度 >>

2009年02月1日 15:05

【練習】模擬3D視角

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

米勒《拾穗》

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

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

相關閱讀：

【練習】3D太空中的無限延伸
【練習】3D立方體

原始碼如下：

// 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;
}