您當前位置：首頁 > web前端 > htmlcss > 打造最美HTML5 3D機房（第四季：大型園區(qū)、地球儀效果，及其他擴展）

打造最美HTML5 3D機房（第四季：大型園區(qū)、地球儀效果，及其他擴展）

來源：程序員人生發(fā)布時間：2016-07-02 13:18:11 閱讀次數(shù)：12722次

前言

初次見面的朋友們大家好，這篇文章是“打造最美3D機房”系列的第4季，感興趣的朋友可從頭開始觀看，以下是正確的瀏覽順序：

打造最美3D機房（第1季：從零開始搭建Web 3D機房）
打造最美3D機房（第2季：機柜和裝備）
打造最美3D機房（第3季：資產(chǎn)管理和動環(huán)監(jiān)控）

答1些讀者問

闊別了半年多，哥其實沒閑著，在憋大招來著。期間陸續(xù)收到朋友的留言和來信，提了很多特別棒的意見和想法，項目也有了很大的進展，在接下來的文章里，哥會忘我和大家分享。

不扯了，進入正題。首先，想說1個最近1直在和大家探討的問題：HTML5好還是插件好？

不管是在學(xué)習(xí)還是在做項目的1些朋友都提到了這個問題。雖然web3d技術(shù)風起云涌，大體還是分為兩大流派：插件派和HTML5派。插件派的技術(shù)線路是，在閱讀器中安裝1個企業(yè)自己做的插件，然后在這個插件上提供3D的開發(fā)能力。典型代表例如Flash插件、Unity3D插件（簡稱U3D）。另外1派就是無插件的HTML5線路，它使用H5的WEBGL標準和Canvas技術(shù)來實現(xiàn)閱讀器中的3D/2D技術(shù)，而無需安裝插件。

插件的好處是可以適配各種老型號的閱讀器（例如老版本的IE），效力應(yīng)當也會好1點。缺點是，需要安裝插件，跨手機平板也麻煩，語言上要使用插件要求的語言。HTML5的好處是不安裝插件，效力也很不錯，語言簡單統(tǒng)1，都是javascript，而且是目前最火的技術(shù)方向。

本人相信 “插件必死”的發(fā)展趨勢。要是不服，就看看Flash，和那些被坑在Flex技術(shù)上現(xiàn)在還爬不出來眼看著他人學(xué)HTML5拿高薪恨得吐血的程序猿們吧。誰又能保證Unity3D不會有1天變成另外1個Flash呢？看看現(xiàn)在日新月異每天大量出現(xiàn)的HTML5技術(shù)和利用，我們有時間爭辯插件好還是H5好這樣的無聊問題，還不照實實在在地干起來。達成共鳴后，我們來開始看此次的1大波更新。

鷹眼

上次的小機房功能已基本完成了，客戶對演示效果也非常滿意。由于客戶使用過我們之前做的2D系統(tǒng)，看到過鷹眼功能（也就是縮略圖），所以這次絕不猶豫也要求3D機房監(jiān)控界面增加鷹眼功能。這個把哥難了1陣子。

為了尋覓思路，哥首先打開了我們之前做過的2D的拓撲圖，尋覓靈感。鷹眼看上去是這模樣的：
圖片描述

上面的界面是同事給客戶做的虛擬機開通、配置的編輯界面，右下角的這塊試圖就是鷹眼縮略圖。咨詢同事，他說鷹眼在2D實現(xiàn)的時候，可以斟酌把2D大圖做1個內(nèi)存縮略圖更新到鷹眼視圖，或在大圖產(chǎn)生任何屬性變化時候進行監(jiān)聽，然后動態(tài)生成縮略圖更新鷹眼視圖。不過在3D里面會有所不同：弄1個小尺寸的webgl的canvas實時刷新，應(yīng)當負載也不大。所以決定再new1個network放在右下角試試：

var overview = new mono.Overview3D(network);
overview.adjustBounds(200,200);
var rootView = overview.getRootView();
network3d.getRootView().appendChild(rootView);

同時，還要把鏡頭固定到頭頂上方垂直向下看，并去掉鼠標的交互機制。經(jīng)過1番折騰，終究把1個鷹眼畫布放在大的場景畫布的右下方，看看效果：
圖片描述

裝備編輯器

這次項目中聽說有200多種不同的裝備，每一個裝備面板都不1樣，要給每個裝備建模，這不是純體力活嗎？就算丟給美工組做，也得耗費好多個人天呢，而且模型的復(fù)用性也不高。斟酌再3，項目組緊急開發(fā)了裝備面板的編輯器，很好地解決了這個問題。我試了1下，以做1個標準的機架裝備為例，還是很快的：
圖片描述

編輯器里面把常見的端口和面板都做好了，拖拖拽拽、對齊吸附，放上logo，很快1個像模像樣的交換機就出來了，真是個良知產(chǎn)品！點擊按鈕導(dǎo)出json，可以直接在項目里面用了。固然，我這邊的用法是把裝備繼續(xù)往機柜上放。機架編輯器是我這里開發(fā)的，效果差不多，可以直接把設(shè)計好的裝備拖放到機柜的位置上：
圖片描述

接下來，再把機柜往房間里面拖，房間的形狀也要編輯的：
圖片描述

直接點擊3D按鈕可以預(yù)覽1下：
圖片描述

對了，這里要注意的是1排機柜1般都會配置1個列頭柜，專門控制電路等信息的，雙擊它會彈出1個電路配置界面：
圖片描述

聽說這個界面也有編輯器可以直接拖拽生成，這樣就更方便了。

管線

機房里有很多物理的或邏輯的鏈路信息，例如網(wǎng)線、光纖，1些業(yè)務(wù)上的連接關(guān)系等。這些管線要顯示在機房中，就需要對管線進行建模、存儲、顯示。顯示的部份，我這里做了簡單的空間自動路徑，尋覓最適合的線路走向，并將A端和Z端裝備以外的物體虛化，可以把管線顯示的更清晰：

圖片描述

對跨樓層的鏈路，也能夠清晰的顯現(xiàn)：
圖片描述

會議室

根據(jù)客戶要求，會議室場景也應(yīng)當建模。經(jīng)過同事現(xiàn)場拍照考察，會議室結(jié)構(gòu)其實不復(fù)雜，因而照舊讓美工mm操刀，很快做完了會議室模型：

圖片描述

固然，這里面的場景其實不是固定不變的，例如雙擊投影儀可讓他在投影幕布上播放視頻；雙擊門可以打開，等等。這是由于我們對這里面的模型進行了分拆、動作定義。

例以下面墻上的電視屏幕，雙擊可以顯示機房的統(tǒng)計信息圖。
圖片描述

繼續(xù)雙擊屏幕上的統(tǒng)計圖，可以把2D的統(tǒng)計圖程序界面直接顯示出來，進行交互。
圖片描述

這也是使用HTML5的2D和3D技術(shù)的混合優(yōu)勢。

園區(qū)

客戶要求機房所在的園區(qū)也要加到場景中，想想也公道。項目大了后，機房會散布在好幾個樓宇的不同樓層，要查看必須有1個3D全景場景進去才方便。這個難度倒是不大，找美工妹子幫忙。妹子比開發(fā)商還快，用了幾個小時，1個全新樓盤便在3D Max中誕生了。轉(zhuǎn)obj，導(dǎo)入系統(tǒng)，急忙打開閱讀器看效果：
圖片描述