????其實(shí)最開(kāi)始接觸3d我是惶恐毫胜，覺(jué)得3d這么高大上的東西诬辈，一點(diǎn)思路都沒(méi)有荐吉，但計(jì)算機(jī)之所以是們一門偉大的產(chǎn)品就在于可以站在巨人的肩膀上奮力攀爬，只有在把你感覺(jué)根基不穩(wěn)的時(shí)候才需要去了解底層原理穿撮。
????我們知道越是底層的東西越是抽象痪欲，理解起來(lái)越是困難业踢，所以作為入門并且作為一個(gè)前端，我選擇了three.js這個(gè)框架來(lái)了解3d的成像原理知举。
????我們先縷清這之間的聯(lián)系，計(jì)算機(jī)圖形學(xué)作為原理通過(guò)顯卡GPU渲染實(shí)現(xiàn)逛钻，其中顯卡的實(shí)現(xiàn)指令主要有2套實(shí)現(xiàn)框架
????????1锰提，Microsoft 的Direct3D
????????2，Open GL
????Direct3D擁有的Microsoft原罪屬性注定它只能在Windows上運(yùn)行边坤，所以O(shè)penGL成為了傳播較廣的一個(gè)赛不。
然后大神們將OpenGL簡(jiǎn)化成是OpenGL ES并加上javascript使之成功移植到了web端罢洲。這也就是webgl的由來(lái)惹苗，又然后在webgl的基礎(chǔ)上封裝而來(lái)了three.js,，一個(gè)由javascript為工具在web端運(yùn)行直接操作顯卡的3d渲染框架桩蓉。
????封裝了這一層又一層后，three.js的上手難度已經(jīng)變的簡(jiǎn)單了許多洽瞬，然而封裝在過(guò)程中，暴露的api越來(lái)越簡(jiǎn)單功能也就越來(lái)越不靈活菩颖，想要寫出那些api沒(méi)有暴露的復(fù)雜特效就需要研究底層的框架为障。
????Three.js之所以受歡迎是因?yàn)樗峁┝吮容^生活化的對(duì)象概念，提供了比較基礎(chǔ)的封裝好了的幾何對(duì)象呻右，對(duì)于復(fù)雜的模型也支持外部導(dǎo)入以及自定義著色器(shader)鞋喇。
??? 制作3d，首先醒串，我們需要一個(gè)場(chǎng)景(Scene)鄙皇，場(chǎng)景里面需要有我們要顯示的物體(Mesh,Line)，然后還需要光源(Light)去照射物體,最后場(chǎng)景是無(wú)限大的缠沈，不可能去獲取整個(gè)場(chǎng)景的信息错蝴，這個(gè)時(shí)候就需要攝像機(jī)(Camera)去取景獲取一定范圍內(nèi)的信息，取得了需要顯示的信息后就需要通過(guò)渲染器(renderer),把3d的場(chǎng)景信息投影在瀏覽器的2d窗口上柬赐，這樣就形成了一幀的3d畫面渲染官紫，假如還需要?jiǎng)討B(tài)的3d動(dòng)畫，那就需要利用requestAnimationFrame函數(shù)進(jìn)行幀循環(huán)動(dòng)畫渲染酝陈，在GPU性能充足的情況下大概是60幀每秒毁涉，這樣也可以利用人眼的視覺(jué)停留形成動(dòng)畫效果。
