transformjs玩轉星球

2021-09-07 09:49:29 字數 2048 閱讀 2769

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

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

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

這裡假設球心的（0，0，0），則：

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

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

functionrandompoints() ); rd_positions.push(); } } }
上面的生成過程很取巧：

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

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

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

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

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

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

可以這麼理解：

functionrotate()  }
可以看到，上面是繞y軸旋轉，所以y的座標不變，x和z需要經過下面的matrix變換：

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

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

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

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

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

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

functiontransformimg(img,i)  functionrender() }
迴圈和初始化，不再需要投影過程：

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

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...

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...