TWaver - 專注UI技術(shù)

自TWaver 3D產(chǎn)品發(fā)布以來，TWaver 3D的定位一直在于為企業(yè)提供3D應(yīng)用的快速開發(fā)工具，方便企業(yè)開發(fā)適合自己的高效、實(shí)時(shí)的監(jiān)控系統(tǒng)。

基于這樣的產(chǎn)品定位，我們在過去的一年多時(shí)間里，一直將重心放在提升引擎效率，增加可視化工具上。對于我們的優(yōu)勢應(yīng)用行業(yè)——電信行業(yè)，我們在3D機(jī)房應(yīng)用上做了比較多的優(yōu)化和定制。近期，有不少客戶向我們提出，總覺用TWaver 3D開發(fā)出來的界面，不像主流的3D效果那么精美。首先，我們想說，效果圖終歸是效果圖，和實(shí)際的系統(tǒng)一般來說還是有一些差異。其次，3D Max這些專業(yè)3D建模工具，和TWaver并不是對立的，而是相輔相成的工具。我們已經(jīng)支持將3D max的文件導(dǎo)入TWaver進(jìn)行展示，也正在研究使得TWaver能對接更多的模型類型。大家可以一起討論，如何讓TWaver的3D模型做得更好。最后，我們始終相信，作為開發(fā)工具的我們，是前途無限的，因此我們決定挑戰(zhàn)一下效果圖，看看TWaver的3D效果，到底有多強(qiáng)。

首先我們先找來一張效果圖，真的是效果圖哦~~

這張效果圖和TWaver 3D以往的demo風(fēng)格都大不相同，我們就來按圖索個(gè)機(jī)房吧~

地板

第一個(gè)要做，也是應(yīng)該比較簡單的，就是地板。這個(gè)地板應(yīng)該是一個(gè)有點(diǎn)厚度、有格子貼圖的薄薄立方體平面。還好經(jīng)過封裝，就寫一段json對象就能定義了：

通過定義，創(chuàng)建了一個(gè)13米*16米的地板塊：

調(diào)整到合適的角度看，效果還不錯(cuò)，但顏色欠缺了些，需要找一個(gè)材質(zhì)紋理圖。紋理圖的尺寸都需要是寬和高都是2的冪，例如128×128、256*256等，這樣出來效果才會好。這也是3D軟件一般所要求的。另外紋理要能連續(xù)拼接不露破綻，這樣才好。例如下面我google出來的圖：

在style里面添加：

效果如下：

雖然不是很華麗，但作為機(jī)房的地板，也綽綽有余了。好像有點(diǎn)so easy，決定加大難度，給地板加一個(gè)方便運(yùn)送設(shè)備的斜坡！

這里就給大家普及下TWaver的好處了。Twaver里面的對象可以支持運(yùn)算，這個(gè)斜坡，可以定義一個(gè)斜的立方體，讓地板剪掉立方體，應(yīng)該可以做到。于是繼續(xù)定義json：

這里定義的一個(gè)傾斜的立方體，通過translate定義位置，通過rotate定義旋轉(zhuǎn)角度，然后再通過op定義運(yùn)算符，這里是“減去”，就用“-”。被剪掉的立方體也可以設(shè)置材質(zhì)、紋理、貼圖、顏色….等等。看看效果：

走廊桌

效果圖的房間有點(diǎn)狹窄，決定加一條寬敞的走廊，并在走廊上放一個(gè)接待桌。對于桌子這種沒有業(yè)務(wù)屬性的對象，為了簡單就偷懶做一個(gè)立方體表示吧！這個(gè)簡單，繼續(xù)使用上述辦法：

有點(diǎn)簡單，再加點(diǎn)陰影效果：

簡簡單單一個(gè)接待桌就做好啦！下面繼續(xù)造房子，蓋墻體。

墻體

墻體是一個(gè)不規(guī)則的路徑，不過放心，TWaver的引擎不光支持不規(guī)則路徑，連曲線路徑都可以噢。所以看上去挺麻煩實(shí)際還是比較簡單的。在json里面定義一組數(shù)字的坐標(biāo)，讓這些數(shù)字依次連接，組成一個(gè)墻體，最后生成3D對象放入場景中。
Json定義大致如下：

注意這里的類型變成了path，data中定義了一個(gè)二維坐標(biāo)數(shù)組來描述墻體。由于墻都是從底面開始的，所以只定義它的平面的x、y坐標(biāo)就行了。吸取剛才的經(jīng)驗(yàn)教訓(xùn)，啟用陰影并咨詢設(shè)計(jì)師美眉幾個(gè)顏色值加上，看看效果：

再瞅瞅細(xì)節(jié)，好像缺點(diǎn)啥，沒門！

剛好挖在斜坡的位置，這樣設(shè)備進(jìn)屋就方便了：

不過這門沒有一個(gè)門框，感覺不太生動。多一個(gè)門框會感覺立體感強(qiáng)一些。門框可以是一個(gè)比門洞略大的立方體，在挖門洞之前添加：

加上陰影和光線等綜合效果，還不錯(cuò)，挺有檔次的。

還少點(diǎn)東西，對，門還沒裝上去。作為機(jī)房，應(yīng)該來個(gè)清爽透亮的玻璃門。門體較大，就來個(gè)雙開門吧。門的定義比較簡單，就是一個(gè)薄的立方體。不過為了做到玻璃效果，要設(shè)置透明度，讓他看上去更像一個(gè)玻璃，再讓設(shè)計(jì)師美眉弄一張好看一點(diǎn)的門的圖，貼上去。先做左邊的門：

上面增加的style主要是透明和貼圖兩項(xiàng)。看看效果：

再把右邊的也加上，位置對稱而已，json就不貼了。為了增加體驗(yàn)，門上再設(shè)置動畫：雙擊可以自動打開，再雙擊可以直接關(guān)閉。TWaver的動畫功能引擎做好了封裝，在json中直接指定動畫類型就行了。不過要注意左右門的動畫旋轉(zhuǎn)方向要相反，要不然一個(gè)向里開一個(gè)向外開感覺比較怪異。

窗

有門就要有窗。有窗才有“窗明幾凈”的清爽干凈的趕腳。就在門的旁邊開一扇大窗戶吧！誰不喜歡大窗戶呢？方法和門類似，先放窗框后挖窗體。不過為了有點(diǎn)變化，這里不做窗框了，做一個(gè)窗臺，方法和道理與門相同。

再添加一個(gè)略帶顏色的透明玻璃。玻璃設(shè)置點(diǎn)高光和反射，增加“玻璃”感覺：

Json中玻璃設(shè)置了透明度和顏色。這樣一個(gè)半透明的茶色玻璃就好了：

到這里突然在想：蓋房子如果像寫程序一樣簡單就好了，所有的程序猿就不會是無房一族單身狗了。當(dāng)然寫程序和蓋房子一樣：該封裝好的要封裝好，最后就是搭積木組裝就行了。如果蓋房子都是從挖土活泥巴開始，那就杯具了。寫程序也是一樣，如果從webgl的main開始寫….這3D機(jī)房的系統(tǒng)要幾個(gè)月甚至幾年才能做出來呢？

外側(cè)墻

房間外側(cè)的兩道走廊隔墻，由于是直線墻，沒有復(fù)雜走向，直接用立方體定義便可：

機(jī)柜

最后再來點(diǎn)重點(diǎn)的內(nèi)容：機(jī)柜，以及其中的服務(wù)器設(shè)備。這才是3D機(jī)房里面最終要管理的內(nèi)容。在我們的實(shí)際項(xiàng)目中，這些資產(chǎn)都是在數(shù)據(jù)庫中存儲，并通過json接口加載到瀏覽器中顯示。這里為了演示方便，直接寫幾個(gè)機(jī)柜的片段，看一下顯示效果。

機(jī)柜對象在項(xiàng)目中是這樣封裝的：用一個(gè)立方體來表示機(jī)柜，并加上貼圖。項(xiàng)目中，為了提高顯示速度，機(jī)柜一開始并不加載內(nèi)部服務(wù)器內(nèi)容，而是只顯示自身一個(gè)立方體。當(dāng)用戶雙擊后，會觸發(fā)一個(gè)延遲加載器，從服務(wù)器端加載機(jī)柜內(nèi)部服務(wù)器，并加載到對應(yīng)的位置上。此時(shí)，機(jī)柜會被挖空成一個(gè)空心的立方體，以便視覺上更像一個(gè)機(jī)柜。

定義機(jī)柜的json如下：

上面的機(jī)柜定義中，有一個(gè)lazy標(biāo)記，標(biāo)記它是否延遲加載其內(nèi)容。如果延遲加載，則雙擊觸發(fā)，否則程序顯示時(shí)直接加載其內(nèi)容。Severity是定義了機(jī)柜的告警信息，它是否有業(yè)務(wù)告警。如果有告警，會用一個(gè)氣泡顯示在機(jī)柜的上方，同時(shí)機(jī)柜也會被染色成告警對應(yīng)的顏色。

繼續(xù)添加更多的機(jī)柜：

到這里，機(jī)房就基本搭建完成了，看下效果，比起效果圖，是不是有過之而無不及呢？

從顯示效果來看，基本不輸前面看到的廣告公司的效果圖，但和它和一張死圖片太不一樣了，我們這是一個(gè)能操作、能漫游、能縮放、有動畫、顯示流暢、瀏覽器無需插件就能直接打開的3D機(jī)房小程序，就一個(gè)json文件和一百多行代碼和一天的時(shí)間就搞定了，還是讓人有點(diǎn)驚訝的。不用插件、不用3Dmax，不用模型庫，我喜歡這樣干干凈凈純粹的小程序。小而美、干凈而純粹。手機(jī)和平板也能用哦，而且還很流暢！經(jīng)過優(yōu)化，場景加載已經(jīng)控制在600毫秒以內(nèi)，縮放漫游也很流暢。當(dāng)然技術(shù)和美化永無止境，用戶的需求也千變?nèi)f化綿綿不絕。但只要我們選擇好了技術(shù)和工具，就能事半功倍。Html5就是極佳的一個(gè)選擇。