transformjs 玩轉星球

**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() 

}

function positionsprojection() 

}

center = ,

camera_position = ,
distance = 600,

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

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

可以這麼理解：

function rotate() 

}

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

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

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

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

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

transform(img, false);

function transformimg(img, i) 

function render()
}

function tick() 

(function () )();

傳送門：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...