很早就有人做3D網頁版的化學元素周期表了，酷炫效果和新鮮技巧一度被眾多粉絲奉為神明，爭相研究和效仿。甚至有人放棄一切撲向這顆蠟燭，不由總是想到那個OPPO廣告女主角拽拽的鄙視道：“辭職去旅游！你敢嗎？”
俺不敢，不過用TWaver做一個也沒用幾個小時。所以就老在想：不就旅個游么，至於嘛？
這個3D元素周期表做了一些改進：卡片上增加了漢字及拼音讀音，原因你懂得——各位程序猿沒幾個敢大聲讀這些漢字的。還好每個字的主要部分還大都認識，多少可以小聲蒙一下，加上拼音就少了許多尷尬。另外在形狀布局和特效上也豐富了一點，具體可以看下方視頻連接。
技術上來說，用TWaver 3D來做的思路略有不同。最開始網上這個程序是使用HTML5、CSS3、WebGL、THREE.js、TWEEN.js等技術做的。使用TWaver就不用這么麻煩了，直接一個mono.js就差不多搞定了。技術上依舊是WebGL+js，但沒有使用CSS3和其他框架。效果和效率都很好。
實現上難度不大，大概思路如下：
- 用數組定義好化學元素周期表的數據。包括編號、漢字、拼音、數值、英文等等。然后在內存中動態生成每個元素對應的圖片卡，並轉成base64格式的內存url字符串。注意圖片的格式、透明度、顏色等細節；
- 為每個化學元素new一個3D立方體，並把內存圖片貼圖到立方體正面。立方體的厚度0就行了，其他面都透明即可；
- 監聽鼠標事件。當鼠標over每個物體時，讓立方體發光；點擊物體時，讓立方體動畫反轉一圈；
- 計算好幾個形狀布局對應的空間坐標，並事先記錄到每個立方體的client屬性表中。例如：node.setClient(‘grid’,{x:100,y:340});
- 放幾個按鈕，每個按鈕點擊后，讓所有的立方體到對應的形狀的位置上去，同時啟用動畫機制；
實際代碼中，也要留意一些注意事項：
- 動畫：當第一次動畫尚未執行完畢，用戶又點擊其他按鈕執行新動畫時，需要先判斷當前有無正在運行的動畫，並及時讓動畫停止。同時還要判斷是否需要把數值恢復成初始值或動畫正常結束所設定的值。這里如不仔細處理，可能會導致動畫將卡片的位置、角度錯亂。
- 布局：球形、螺旋、隨機等空間點其實都很好計算。尤其球形布局，開始大家可能會去尋找“在一個半徑為r的球形表面均勻散布n個點，求每個點的坐標？”這樣的題目。這樣就把問題復雜化了。因為簡單的視覺布局並不需要特別嚴謹的位置數值，所以大致把球進行徑向和橫向切片進行數值插入即可；
- 貼圖：最開始，我們可能會覺得程序是使用了100張小圖片進行貼圖。但實際上，由於每個卡片的區別僅僅是文字，所以完全可以在內存動態生成。這樣速度快節省了網絡下載圖片的時間以及維護圖片的麻煩，同時文字和圖片等樣式也更容易控制。這也都是HTML5的canvas技術為大家帶來的好處。
- 物體朝向：在布局過程中，每個卡片的旋轉和朝向是一個要考慮的問題。例如球形，每個卡片要面向球形圓心發射線的外方向，螺旋形卡片則朝向水平外方向，等等。計算這些坐標和角度需要很多數學運算，光是求坐標系和直角坐標系轉換之類的就夠大家忙活一陣子了。而用TWaver就簡單了：每個物體直接lookAt一個點就行了。例如球形卡片，每幀動畫只要執行：node.lookAt(0,0,0)就行了，對嗎？還不完全對。這樣lookAt到中心點，不就“屁股”朝外了嗎？用戶看到的字是卡片的背面，是反的。要解決也簡單，應當讓它lookAt自己坐標兩倍的地方，也就是圓心放射線的外面：node.lookAt(x*2, y*2, z*2)，這樣就對了。
- 發光。鼠標over每個物體，都會看到發光。而鼠標over在光暈位置，卻不會觸發over事件。這是怎么做到的呢？其實也是小技倆，大家可以看看程序，自己研究吧。
生成內存圖片代碼片段：
1 |
var url = canvas.toDataURL("image/png"); |
2 |
node.setStyle('front.m.texture.image',url); |
球形布局坐標計算代碼片段：
1 |
var radius=1000; |
2 |
var phi = Math.acos( -1 + ( 2 * index ) / total ); |
3 |
var theta = Math.sqrt( total * Math.PI ) * phi; |
4 |
var x = radius * Math.cos( theta ) * Math.sin( phi ); |
5 |
var y = radius * Math.sin( theta ) * Math.sin( phi ); |
6 |
var z = radius * Math.cos( phi ); |
程序和源代碼都已經在TWaver的MONO DESIGN產品中，感興趣的朋友可以登錄在線網址www.mono-design.cn或下載產品包。趕緊試試吧！
去優酷欣賞一下TWaver 3D元素周期表視頻吧：