2009年06月17日 22:31
【練習】2D與3D的精準對位
3D的應用不時都會和2D結合, 上一篇的Big and Small有部份是將2D的影像以粒子(particle)等方式置於場景中,一樣有z深度, 也會因為場景的移動而被遮蓋、縮放, 本質上還是MovieClip, 這是2D置入3D畫面的方法; 有時的應用則是需要3D置於2D之上, 因全3D畫面的運算負荷過重, 所以把2D畫面當主軸, 需要時才轉換, 這時候就要用對位的方式, 讓3D物件從2D畫面銜接上來, 聽起來似乎很難, 但其實是很簡單的公式就能達成。
【觀看範例】2D部份是影格動畫, 按下"3D"後隱藏物件並換上3D圖 (隨滑鼠轉動)
公式參考來源: Everyday Flash | demo
首先要確保大小是相同的。除了建立材質時不予以縮放, 還需以目前的攝影機焦距與位置求出3D物件所應置放的z值, 這樣就能得到相同的大小(攝影機在z軸上移動)。或者不調整z值, 調整zoom或focus也可以, 要稍微換算一下。
3dobj.z=(camera.zoom*camera.focus)-Math.abs(camera.z);大小相同後再將位置貼齊, 首先求出3D物件在2D平面上的實際x,y值, 以用來移動到適當位置的參考, 注意3D物件的原點不一定在左上角, 像Plane建立時預設是置中。
screenPosX = 3dobj.screen.x + viewport.viewportWidth/2; screenPosY = 3dobj.screen.y + viewport.viewportHeight/2;原始檔下載:(須搭配Papervision3D使用)
在範例中為了要讓編譯的環境簡化, 所以沒有用tween的方式來做, 一般實作則通常會使用TweenLite或Tweener等套件, 來讓轉動動作更能接續且流暢。
引用URL
http://cgi.blog.roodo.com/trackback/9255579
