3d視圖找不到模型，NGUI_2.6.3_（3D視圖ScrollView）

今天我們通過一個綜合的例子來講解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節點屬性。3d視圖找不到模型。可以把它們的UIPanel 代碼刪除掉。建立好之后，它們的層級關系如圖：

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

4. 下面我們開始為各個UI元素賦予屬于它們的代碼。魔獸世界插件eui，首先為LagPos添加腳本 LagPosition。該腳本的作用在于我們移動panel的時候，它可以模擬一個緩沖的移動效果。然后是AutoYaw，為它添加腳本 WindowAutoYaw，該腳本的作用在于使物體在左右移動的時候自動旋轉一定角度，實現透視效果。最后是DragTilt，為它添加腳本 WindowDragTilt。該腳本的作用在于使物體左右移動的時候，產生一定的旋轉，模擬甩尾效果。3D、大家有時間可以研究研究這三個代碼。這里就不貼出 來了。

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

接著我們在Panel_List 下新建幾個按鈕或者別的任何UI元素。不用調節它的位置。我們可以自動排列它的位置。秘密武器就是UIGrid腳本。ug設計插件有哪些。為Panel_List添加腳本 UIGrid。這時Panel_List下的子物體會自動排列。我們可以通過UIGrid中的參數調節它的排列是縱向或者橫向，還可以調節它的X，Y間隔 間距。

由于Panel_List是可以拖動的，我們要為它添加UIDraggablePanel。我們只想在橫向左右拖動它，所以設置 UIDraggablePanel下的參數Scale為1.0.0。3d切換視圖快捷鍵。再往下看UIDraggablePanel的參數可以發現有 HorizontalScrollBar和VerticalScrollBar選項，它是用來讓我們指定縱向和橫向的ScrollBar的。UIGrid 和UIDraggablePanel的參數如圖：

6.??現在我們要為UIDraggablePanel指定ScrollBar。在Panel_Controls節點下新建一個Scroll Bar。把它賦給剛才的UIDragablePanel下的HorizontalScrollBar。運行可以發現。遠程3d視圖怎么打開，我們已經可以拖動它，并且控制按鈕位 置了。如圖

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

8. 為Spirit_DragContents添加一個Collider，菜單ＮＧＵＩ－－＞Attach a Collider。elementui輪播圖？然后在添加腳本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或者安卓界面的滾動效果。大家可以自己試驗一下。