TWaver - 專注UI技術(shù)

很早就有人做3D網(wǎng)頁版的化學(xué)元素周期表了，酷炫效果和新鮮技巧一度被眾多粉絲奉為神明，爭相研究和效仿。甚至有人放棄一切撲向這顆蠟燭，不由總是想到那個OPPO廣告女主角拽拽的鄙視道：“辭職去旅游！你敢嗎？”

俺不敢，不過用TWaver做一個也沒用幾個小時。所以就老在想：不就旅個游么，至于嘛？

這個3D元素周期表做了一些改進：卡片上增加了漢字及拼音讀音，原因你懂得——各位程序猿沒幾個敢大聲讀這些漢字的。還好每個字的主要部分還大都認(rèn)識，多少可以小聲蒙一下，加上拼音就少了許多尷尬。另外在形狀布局和特效上也豐富了一點，具體可以看下方視頻連接。

技術(shù)上來說，用TWaver 3D來做的思路略有不同。最開始網(wǎng)上這個程序是使用HTML5、CSS3、WebGL、THREE.js、TWEEN.js等技術(shù)做的。使用TWaver就不用這么麻煩了，直接一個mono.js就差不多搞定了。技術(shù)上依舊是WebGL+js，但沒有使用CSS3和其他框架。效果和效率都很好。

實現(xiàn)上難度不大，大概思路如下：

1. 用數(shù)組定義好化學(xué)元素周期表的數(shù)據(jù)。包括編號、漢字、拼音、數(shù)值、英文等等。然后在內(nèi)存中動態(tài)生成每個元素對應(yīng)的圖片卡，并轉(zhuǎn)成base64格式的內(nèi)存url字符串。注意圖片的格式、透明度、顏色等細節(jié)；
2. 為每個化學(xué)元素new一個3D立方體，并把內(nèi)存圖片貼圖到立方體正面。立方體的厚度0就行了，其他面都透明即可；
3. 監(jiān)聽鼠標(biāo)事件。當(dāng)鼠標(biāo)over每個物體時，讓立方體發(fā)光；點擊物體時，讓立方體動畫反轉(zhuǎn)一圈；
4. 計算好幾個形狀布局對應(yīng)的空間坐標(biāo)，并事先記錄到每個立方體的client屬性表中。例如：node.setClient(‘grid’,{x:100,y:340});
5. 放幾個按鈕，每個按鈕點擊后，讓所有的立方體到對應(yīng)的形狀的位置上去，同時啟用動畫機制；

實際代碼中，也要留意一些注意事項：

1. 動畫：當(dāng)?shù)谝淮蝿赢嬌形磮?zhí)行完畢，用戶又點擊其他按鈕執(zhí)行新動畫時，需要先判斷當(dāng)前有無正在運行的動畫，并及時讓動畫停止。同時還要判斷是否需要把數(shù)值恢復(fù)成初始值或動畫正常結(jié)束所設(shè)定的值。這里如不仔細處理，可能會導(dǎo)致動畫將卡片的位置、角度錯亂。
2. 布局：球形、螺旋、隨機等空間點其實都很好計算。尤其球形布局，開始大家可能會去尋找“在一個半徑為r的球形表面均勻散布n個點，求每個點的坐標(biāo)？”這樣的題目。這樣就把問題復(fù)雜化了。因為簡單的視覺布局并不需要特別嚴(yán)謹(jǐn)?shù)奈恢脭?shù)值，所以大致把球進行徑向和橫向切片進行數(shù)值插入即可；
3. 貼圖：最開始，我們可能會覺得程序是使用了100張小圖片進行貼圖。但實際上，由于每個卡片的區(qū)別僅僅是文字，所以完全可以在內(nèi)存動態(tài)生成。這樣速度快節(jié)省了網(wǎng)絡(luò)下載圖片的時間以及維護圖片的麻煩，同時文字和圖片等樣式也更容易控制。這也都是HTML5的canvas技術(shù)為大家?guī)淼暮锰帯?/span>
4. 物體朝向：在布局過程中，每個卡片的旋轉(zhuǎn)和朝向是一個要考慮的問題。例如球形，每個卡片要面向球形圓心發(fā)射線的外方向，螺旋形卡片則朝向水平外方向，等等。計算這些坐標(biāo)和角度需要很多數(shù)學(xué)運算，光是求坐標(biāo)系和直角坐標(biāo)系轉(zhuǎn)換之類的就夠大家忙活一陣子了。而用TWaver就簡單了：每個物體直接lookAt一個點就行了。例如球形卡片，每幀動畫只要執(zhí)行：node.lookAt(0,0,0)就行了，對嗎？還不完全對。這樣lookAt到中心點，不就“屁股”朝外了嗎？用戶看到的字是卡片的背面，是反的。要解決也簡單，應(yīng)當(dāng)讓它lookAt自己坐標(biāo)兩倍的地方，也就是圓心放射線的外面：node.lookAt(x*2, y*2, z*2)，這樣就對了。
5. 發(fā)光。鼠標(biāo)over每個物體，都會看到發(fā)光。而鼠標(biāo)over在光暈位置，卻不會觸發(fā)over事件。這是怎么做到的呢？其實也是小技倆，大家可以看看程序，自己研究吧。

生成內(nèi)存圖片代碼片段：