我們今天模擬的設備是機房設備，先來目睹下最終效果：

基於HTML5快速搭建3D機房設備面板
我來解釋下這個模型，一個帶有透明玻璃門的機櫃，機櫃裏裝有5臺設備，門可以開合，設備可以插拔，那麽我麽該如何搭建這樣的設備呢？方法不難，我們一步一步來。

基於HTML5快速搭建3D機房設備面板
看起來有模有樣的，其實呢，它就是一個長方體，然後在長方體的正面貼上一張圖片，這樣子設備的殼就出來了，創建代碼如下：

其中設置設備的正面圖片的方法是通過設置節點的front.image樣式屬性來實現的，在代碼中將front.image屬性設置為’panel’，而’panel’屬性是已經通過ht.Default.setImage()方法註冊了的圖片的別名，在代碼中還設置了長方體各個面的顏色和鼠標懸停時的提示

語。

在代碼中還調用了createNode()的方法，該方法並沒有做什麽特殊的操作，只是將創建3D拓撲節點的代碼封裝起來，精簡代碼，避免相同的代碼重復書寫，具體的封裝如下：
該方法通過傳入位置信息和大小信息創建出一個3D拓撲節點，並添加到dataModel中，最後返回該節點對象。

剛剛我們只是創建了設備的外殼而已，在設備上又部分端口是被被占用的，所以接下來我們要做的就是填充設備端口，仔細看了下設備的端口形狀，發現形狀是不規則的呢，那麽設備端口該如何填充呢？我們只需要找一個和端口形狀一樣的圖片貼在長方體的正面，然後

在設備上總共有20個端口，我們通過傳入的端口位置信息來確定創建出來的節點位置，仔細觀察設備端口可以發現，第二排的端口和第一排的端口方向不一樣，所以在創建第二排的端口時需要通過設置front.uv屬性來控制貼圖的翻轉，當然貼圖也是我們事先註冊好了的

好了，到這裏我們的設備模型就構建出來了，那麽接下來就是創建機櫃了，機櫃的創建就和設備外殼的創建基本相似，不一樣的地方在於，機櫃有一個門，這個門有開合的功能，由於拓撲節點無法單獨對節點的某一面分離出來做旋轉操作，所以門必須是一個單獨的拓撲

效果圖種，我們把門稍微裝飾了一下，在門的邊緣上加上了藍色的貼邊，讓門看起來更有質感，效果圖和思路都有了，代碼自然而然就出來了，瞧瞧下面的代碼，有一點點小復雜哦。

代碼的邏輯是這樣的，先創建一個長方體作為機櫃的外殼，然後將長方體的正面設置為隱藏，然後創建一個多邊形作為門，將門設為淺藍色半透明，最後創建4個藍色長方體貼到門的邊緣作為裝飾，如此一個機櫃就搭建完成了。

設備模型有了，機櫃有了，接下來的工作就是將兩者合並起來，方法很簡單，就是創建設備並將設備吸附到機櫃上，具體的代碼如下：

還記得前面構建設備模型和機櫃門的代碼中，我們對這兩個模型添加了鼠標懸停時的提示內容，雙擊可以打開門，雙擊可以抽出設備，那麽我們現在就來實現這兩個效果，首先我們來分析下具體的實現方案：

雙擊的事件要添加在哪裏呢？對每個拓撲節點做監聽嗎？這是最直接的方法，但是這樣做的話，有多少節點將會有多少個對應的處理函數，而且同一類型的處理函數又是一樣的，那麽這就會導致系統資源的浪費，所以對每個節點做雙擊的監聽方案是不可取的，那麽我們

該如何處理雙擊事件呢？我們可以換個角度思考，所有的節點都是添加到3D拓撲組件上的，那麽我們是否可以通過監聽3D拓撲組件的雙擊事件，然後通過事件對象獲取到對應的節點，然後通過判斷節點上設置的自定義標識屬性來做相應的處理，具體的代碼如下：

閱讀上面的代碼，大家會發現實現的方案和我們提到的方案不太一樣，我們通過監聽3D拓撲組件的dataDoubleClicked事件就可以直接獲取到被雙擊的節點對象，而無需我們自己通過事件對象獲取對應的節點對象，當然就監聽dataDoubleClicked事件了。

在代碼中，根據節點預設的不同的屬性值來確認該做什麽處理，如果節點對象是門的話，則通過ht.Default.startAnim()方法緩慢的修改門的rotation；如果節點對象是設備的話，則緩慢修改設備的position。

到這裏，今天的Demo的所有表現和功能就完成了，今天的內容中有設計到節點的style應用，我沒有做深入的講解，後續會給大家一一介紹，感興趣的朋友可以通過HT for Web的樣式手冊來了解更多的內容。

wwwlyjustcom基於HTML5快速搭建3D機房設備面板199O8836661