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