今天我們通過一個綜合的例子來講解NGUI的3dUI 和ScrollView。本例結合是了NGUI官方自帶例子中的Example 6 - Draggable Window和Example 7 - Scroll View (Panel)兩個場景的內容來講的，幫助大家更好的理解這兩個場景的內容。如果大家對這兩個場景都很精通的話，可以忽略此教程。最終實現結果如下圖：

１．首先新建一個場景，通過選單NGUI－－＞Open　the　UI　Wizard 開啟UI  TOOL 視窗，這次我們新建UI 的時候更改UI的camera選項，設定為Advanced　3D．如圖

２．在Panel節點下新建三個Panel，分別命名為LagPos,AutoYaw,DragTilt,設定它們的層級關係為並且設定AutoYaw為 LagPos的子物體，設定DragTilt為AutoYaw的子物體。這裡我們只是需要它們的Transform節點屬性。可以把它們的UIPanel 程式碼刪除掉。建立好之後，它們的層級關係如圖：

3. 在DragTilt節點下新建一個Panel，作為我們所有UI元素的根節點命名為Panel_Root,然後再在它的節點下新建兩個Panel。分別命 名為Panel_Controls，Panel_List。這裡提醒大家，在做3D UI 的時候，一定要多用Panel，可以把同一組的UI元素放到一個Panel裡。這樣在控制的時候就會很方便，我們只要指定顯示或者隱藏它們所在的 Panel就可以動態切換介面。還有一個要注意的就是在3D UI中，UI元素的Z軸位置屬性是有用的。它們都是真實的3D物體。這意味著我們可以控制它們的Z軸位置和Z軸旋轉。介面效果如圖。

4. 下面我們開始為各個UI元素賦予屬於它們的程式碼。首先為LagPos新增指令碼 LagPosition。該指令碼的作用在於我們移動panel的時候，它可以模擬一個緩衝的移動效果。然後是AutoYaw，為它新增指令碼 WindowAutoYaw，該指令碼的作用在於使物體在左右移動的時候自動旋轉一定角度，實現透視效果。最後是DragTilt，為它新增指令碼 WindowDragTilt。該指令碼的作用在於使物體左右移動的時候，產生一定的旋轉，模擬甩尾效果。大家有時間可以研究研究這三個程式碼。這裡就不貼出 來了。

5. 我們要做的UI介面是一個可以隨意移動並且自動旋轉的3D的介面下，一排按鈕可以左右拖動，但是隻顯示中間位置的幾個。下面有一個Scroll Bar也可以拖動控制顯示的按鈕。我們先設定Panel_List 的顯示區域。設定Panel_List 的UIPanel下的Clipping為SoftClip，並設定Clip框的大小。

接著我們在Panel_List 下新建幾個按鈕或者別的任何UI元素。不用調節它的位置。我們可以自動排列它的位置。祕密武器就是UIGrid指令碼。為Panel_List新增指令碼 UIGrid。這時Panel_List下的子物體會自動排列。我們可以通過UIGrid中的引數調節它的排列是縱向或者橫向，還可以調節它的X，Y間隔 間距。

由於Panel_List是可以拖動的，我們要為它新增UIDraggablePanel。我們只想在橫向左右拖動它，所以設定 UIDraggablePanel下的引數Scale為1.0.0。再往下看UIDraggablePanel的引數可以發現有 HorizontalScrollBar和VerticalScrollBar選項，它是用來讓我們指定縱向和橫向的ScrollBar的。UIGrid 和UIDraggablePanel的引數如圖：

6.  現在我們要為UIDraggablePanel指定ScrollBar。在Panel_Controls節點下新建一個Scroll Bar。把它賦給剛才的UIDragablePanel下的HorizontalScrollBar。執行可以發現。我們已經可以拖動它，並且控制按鈕位 置了。如圖

7.現在我們發現，我們只能通過拖動滾動條控制按鈕的位置。如果我們想滑鼠在按鈕周圍的區域時，都可以拖動怎麼辦呢？這裡我們就要用到 UIDragPanelContents了。首先我們在Panel_Controls下新建一個Spirit命名為 Spirit_DragContents，修改它的大小和位置。如圖深色方塊：

8. 為Spirit_DragContents新增一個Collider，選單ＮＧＵＩ－－＞Attach a Collider。然後在新增指令碼UIDragPanelContents。設定它的Dragable Panel為 Panel_List。這裡有個要注意的地方就是Spirit_DragContents和前面的按鈕的位置問題，我們新建的 Spirit_DragContents可能會遮擋住按鈕。使我們無法點選。這裡大家可以修改Panel_Controls和Panel_List的Z軸 位置，來調節它們的前後關係。這時候我們執行可以發現。我們已經可以在圖中的深色區域拖動移動按鈕的位置了。

9.現在我們來做一些工作使整個Panel移動起來，前面我們已經做好準備工作了。現在像上個步驟一樣在Panel_Controls下新建一個Spirit命名為Spirit_DragPanel，調節它的大小和位置。效果如圖中上部淺色區域。

10. 為Spirit_DragPanel新增指令碼UIDragObject指令碼，設定指令碼中的Target為最先建立的Panel，也就是LagPos的父物體Panel。
最後為整個介面新增一個背景。新建一個Spirit，調節大小和位置作為整個介面的背景。

現在我們已經完成了所有的工作，執行程式，分別按住滑鼠在頂部的Spirit區域和中間按鈕周圍的區域拖動，檢視效果。
對比如圖

總結：利用這個知識，我們可以做幾個Panel滾動顯示的效果，還可以模擬IOS或者安卓介面的滾動效果。大家可以自己試驗一下。