Posted on 2014-07-14 10:12
TWaver 閱讀(6858)
評論(25) 編輯 收藏
很早就有人做3D網(wǎng)頁版的化學(xué)元素周期表了，酷炫效果和新鮮技巧一度被眾多粉絲奉為神明，爭相研究和效仿。甚至有人放棄一切撲向這顆蠟燭，不由總是想到那個OPPO廣告女主角拽拽的鄙視道：“辭職去旅游！你敢嗎？”
俺不敢，不過用TWaver做一個也沒用幾個小時。所以就老在想：不就旅個游么，至于嘛？
這個3D元素周期表做了一些改進(jìn)：卡片上增加了漢字及拼音讀音，原因你懂得——各位程序猿沒幾個敢大聲讀這些漢字的。還好每個字的主要部分還大都認(rèn)識，多少可以小聲蒙一下，加上拼音就少了許多尷尬。另外在形狀布局和特效上也豐富了一點，具體可以看下方視頻連接。
技術(shù)上來說，用TWaver 3D來做的思路略有不同。最開始網(wǎng)上這個程序是使用HTML5、CSS3、WebGL、THREE.js、TWEEN.js等技術(shù)做的。使用TWaver就不用這么麻煩了，直接一個mono.js就差不多搞定了。技術(shù)上依舊是WebGL+js，但沒有使用CSS3和其他框架。效果和效率都很好。
實現(xiàn)上難度不大，大概思路如下：
- 用數(shù)組定義好化學(xué)元素周期表的數(shù)據(jù)。包括編號、漢字、拼音、數(shù)值、英文等等。然后在內(nèi)存中動態(tài)生成每個元素對應(yīng)的圖片卡，并轉(zhuǎn)成base64格式的內(nèi)存url字符串。注意圖片的格式、透明度、顏色等細(xì)節(jié)；
- 為每個化學(xué)元素new一個3D立方體，并把內(nèi)存圖片貼圖到立方體正面。立方體的厚度0就行了，其他面都透明即可；
- 監(jiān)聽鼠標(biāo)事件。當(dāng)鼠標(biāo)over每個物體時，讓立方體發(fā)光；點擊物體時，讓立方體動畫反轉(zhuǎn)一圈；
- 計算好幾個形狀布局對應(yīng)的空間坐標(biāo)，并事先記錄到每個立方體的client屬性表中。例如：node.setClient(‘grid’,{x:100,y:340});
- 放幾個按鈕，每個按鈕點擊后，讓所有的立方體到對應(yīng)的形狀的位置上去，同時啟用動畫機(jī)制；
實際代碼中，也要留意一些注意事項：
- 動畫：當(dāng)?shù)谝淮蝿赢嬌形磮?zhí)行完畢，用戶又點擊其他按鈕執(zhí)行新動畫時，需要先判斷當(dāng)前有無正在運(yùn)行的動畫，并及時讓動畫停止。同時還要判斷是否需要把數(shù)值恢復(fù)成初始值或動畫正常結(jié)束所設(shè)定的值。這里如不仔細(xì)處理，可能會導(dǎo)致動畫將卡片的位置、角度錯亂。
- 布局：球形、螺旋、隨機(jī)等空間點其實都很好計算。尤其球形布局，開始大家可能會去尋找“在一個半徑為r的球形表面均勻散布n個點，求每個點的坐標(biāo)？”這樣的題目。這樣就把問題復(fù)雜化了。因為簡單的視覺布局并不需要特別嚴(yán)謹(jǐn)?shù)奈恢脭?shù)值，所以大致把球進(jìn)行徑向和橫向切片進(jìn)行數(shù)值插入即可；
- 貼圖：最開始，我們可能會覺得程序是使用了100張小圖片進(jìn)行貼圖。但實際上，由于每個卡片的區(qū)別僅僅是文字，所以完全可以在內(nèi)存動態(tài)生成。這樣速度快節(jié)省了網(wǎng)絡(luò)下載圖片的時間以及維護(hù)圖片的麻煩，同時文字和圖片等樣式也更容易控制。這也都是HTML5的canvas技術(shù)為大家?guī)淼暮锰帯?/span>
- 物體朝向：在布局過程中，每個卡片的旋轉(zhuǎn)和朝向是一個要考慮的問題。例如球形，每個卡片要面向球形圓心發(fā)射線的外方向，螺旋形卡片則朝向水平外方向，等等。計算這些坐標(biāo)和角度需要很多數(shù)學(xué)運(yùn)算，光是求坐標(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)，這樣就對了。
- 發(fā)光。鼠標(biāo)over每個物體，都會看到發(fā)光。而鼠標(biāo)over在光暈位置，卻不會觸發(fā)over事件。這是怎么做到的呢？其實也是小技倆，大家可以看看程序，自己研究吧。
生成內(nèi)存圖片代碼片段：
1 | var url = canvas.toDataURL("image/png"); |
2 | node.setStyle('front.m.texture.image',url); |
球形布局坐標(biāo)計算代碼片段：
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 ); |
程序和源代碼都已經(jīng)在TWaver的MONO DESIGN產(chǎn)品中，感興趣的朋友可以登錄在線網(wǎng)址www.mono-design.cn或下載產(chǎn)品包。趕緊試試吧！
TWaver 3D Demo 欣賞
http://v.youku.com/v_show/id_XNzM4OTAzODY0.html