transformjs 玩轉星球

2021-09-17 05:52:05 字數 2207 閱讀 3246

**100行多一點,直接看也沒有什麼壓力。下面分幾步講解下。

設球心為 (a,b,c),半徑為r,

則球的標準方程為(x-a)²+(y-b)²+(z-c)²=r²

這裡假設球心的(0,0,0),則:

標準方程為x²+y²+z²=r²

因為可以渲染的時候再把球的本地座標轉為世界座標進行位移,所以球心(0,0,0)便可以。

function randompoints() );

rd_positions.push();}}

}

上面的生成過程很取巧:

其中positions用來存放所有點的local座標,rd_positions用來以後存放投影後的座標。

function createimgs() 

}

所有的點都對應建立乙個絕對定位的,並且通過transform(img,true)給img注入transformation能力。注意第二個引數true代表關閉透視投影,因為投影下面會自己去實現。

function positionsprojection() 

}

為了簡單起見,把球心和攝像機(也可以叫眼睛、亦或是視點)的座標分別設定為:

center = ,

camera_position = ,

distance = 600,

distance代表攝像機到投影平面的距離,攝像機就固定在球心的正前方不動,這樣進行透視投影或正交投影計算起來無比方便,免去用齊次座標、4*4矩陣的過程。如下簡單推導便可:

這裡需要注意的是,上面是透視投影的**,會產生近大遠小的感覺。透視投影是視錐體(上圖沒有把視錐體畫出來),正交投影是立方體。

正交投影如下**,x和y座標投影後不變就可以了:

可以這麼理解:

function rotate() 

}

可以看到,上面是繞y軸旋轉,所以y的座標不變,x和z需要經過下面的matrix變換:

通過通過上面幾行**串整個流程。通過requestanimationframe迴圈執行tick。

為了加深理解,你可以把原始碼 clone下來,然後改**實現:

因為transform第二個引數不傳,或者設定為false的時候是開啟透視投影的。

所以可以設定img.translatez來使用瀏覽器自身的透視投影,省去positionsprojection過程。

建立的時候,使用下面的方式注入transformation能力,

transform(img, false);
渲染的時候直接使用原始座標便可:

function transformimg(img, i) 

function render()

}

迴圈和初始化,不再需要投影過程:

function tick() 

(function () )();

transformjs提供了基礎的transformation能力,不與任何時間和運動庫繫結。雖然官網demo簡單,但是稍微費點腦細胞就可以做出很酷炫的效果。所以酷炫靠大家,用transformjs就對了。

傳送門:transformjs 主頁 | transformjs github

所有例子可以在上面找到。

transformjs玩轉星球

100行多一點,直接看也沒有什麼壓力。下面分幾步講解下。設球心為 a,b,c 半徑為r,則球的標準方程為 x a y b z c r 這裡假設球心的 0,0,0 則 標準方程為x y z r 因為可以渲染的時候再把球的本地座標轉為世界座標進行位移,所以球心 0,0,0 便可以。functionran...

transformjs 玩轉星球

100行多一點,直接看也沒有什麼壓力。下面分幾步講解下。設球心為 a,b,c 半徑為r,則球的標準方程為 x a y b z c r 這裡假設球心的 0,0,0 則 標準方程為x y z r 因為可以渲染的時候再把球的本地座標轉為世界座標進行位移,所以球心 0,0,0 便可以。function ra...

移動Web利器transformjs入門

在過去的兩年,越來越多的同事 朋友和其他不認識的童鞋進行移動web開發的時候,都使用了transformjs,所有必要介紹一下,讓更多的人受益,提高程式設計效率,並享受程式設計樂趣。當然transformjs不僅僅支援移動裝置,支援css3 3d transforms的瀏覽器都能正常使用transf...