我們今天模拟的裝置是機房裝置，先來目睹下最終效果：
我來解釋下這個模型，一個帶有透明玻璃門的機櫃，機櫃裡裝有5台裝置，門可以開合，裝置可以插拔，那麼我麼該如何搭建這樣的裝置呢？方法不難，我們一步一步來。
我們先從裝置開始，裝置的示意圖如下：
看起來有模有樣的，其實呢，它就是一個長方體，然後在長方體的正面貼上一張圖檔，這樣子裝置的殼就出來了，建立代碼如下：
其中設定裝置的正面圖檔的方法是通過設定節點的front.image樣式屬性來實作的，在代碼中将front.image屬性設定為’panel’，而’panel’屬性是已經通過ht.Default.setImage()方法注冊了的圖檔的别名，在代碼中還設定了長方體各個面的顔色和滑鼠懸停時的提示語。
剛剛我們隻是建立了裝置的外殼而已，在裝置上又部分端口是被被占用的，是以接下來我們要做的就是填充裝置端口，仔細看了下裝置的端口形狀，發現形狀是不規則的呢，那麼裝置端口該如何填充呢？我們隻需要找一個和端口形狀一樣的圖檔貼在長方體的正面，然後套在裝置上就可以了，具體的實作如下：
在裝置上總共有20個端口，我們通過傳入的端口位置資訊來确定建立出來的節點位置，仔細觀察裝置端口可以發現，第二排的端口和第一排的端口方向不一樣，是以在建立第二排的端口時需要通過設定front.uv屬性來控制貼圖的翻轉，當然貼圖也是我們事先注冊好了的。
好了，到這裡我們的裝置模型就建構出來了，那麼接下來就是建立機櫃了，機櫃的建立就和裝置外殼的建立基本相似，不一樣的地方在于，機櫃有一個門，這個門有開合的功能，由于拓撲節點無法單獨對節點的某一面分離出來做旋轉操作，是以門必須是一個單獨的拓撲節點，我們先來看看機櫃的效果圖：
效果圖種，我們把門稍微裝飾了一下，在門的邊緣上加上了藍色的貼邊，讓門看起來更有質感，效果圖和思路都有了，代碼自然而然就出來了，瞧瞧下面的代碼，有一點點小複雜哦。
裝置模型有了，機櫃有了，接下來的工作就是将兩者合并起來，方法很簡單，就是建立裝置并将裝置吸附到機櫃上，具體的代碼如下：
還記得前面建構裝置模型和機櫃門的代碼中，我們對這兩個模型添加了滑鼠懸停時的提示内容，輕按兩下可以打開門，輕按兩下可以抽出裝置，那麼我們現在就來實作這兩個效果，首先我們來分析下具體的實作方案：
輕按兩下的事件要添加在哪裡呢？對每個拓撲節點做監聽嗎？這是最直接的方法，但是這樣做的話，有多少節點将會有多少個對應的處理函數，而且同一類型的處理函數又是一樣的，那麼這就會導緻系統資源的浪費，是以對每個節點做輕按兩下的監聽方案是不可取的，那麼我們該如何處理輕按兩下事件呢？我們可以換個角度思考，所有的節點都是添加到3D拓撲元件上的，那麼我們是否可以通過監聽3D拓撲元件的輕按兩下事件，然後通過事件對象擷取到對應的節點，然後通過判斷節點上設定的自定義辨別屬性來做相應的處理，具體的代碼如下：
在代碼中，我們調用了toggleData()方法來處理輕按兩下事件，具體的處理代碼如下：
在代碼中，根據節點預設的不同的屬性值來确認該做什麼處理，如果節點對象是門的話，則通過ht.Default.startAnim()方法緩慢的修改門的rotation；如果節點對象是裝置的話，則緩慢修改裝置的position。
下面附上今天的Demo源碼及視訊。
<a href="http://v.youku.com/v_show/id_XMTMwNTY2ODE0NA==.html" target="_blank">http://v.youku.com/v_show/id_XMTMwNTY2ODE0NA==.html</a>