谷歌VRAPP實(shí)戰(zhàn)UNITY與CARDBOARDAPP基礎(chǔ)實(shí)踐(三).docx

谷歌VR APP實(shí)戰(zhàn)！UNITY與CARDBOARD APP基礎(chǔ)實(shí)踐（三）今天的VR實(shí)戰(zhàn)是騰訊ISUX高級(jí)交互家設(shè)計(jì)師C7210親自寫(xiě)的，教你借用免費(fèi)的Unity資源，搭起3D場(chǎng)景，放上3D對(duì)象，并使用Google提供的SDK組件模擬VR視野。這個(gè)教程最好玩的地方是，如果有興趣打包成App放到iPhone當(dāng)中，便可以直接塞到Cardboard里面以真實(shí)VR的方式進(jìn)行體驗(yàn)了我們接下來(lái)將要一起搗鼓的東西，簡(jiǎn)單描述一下大約就是借來(lái)一些免費(fèi)的Unity資源，搭起3D場(chǎng)景，在里面放上一兩個(gè)沒(méi)有任何意義的3D對(duì)象，使用Google提供的SDK組件模擬VR視野，當(dāng)視線聚焦在3D對(duì)象上時(shí)，VR準(zhǔn)星會(huì)發(fā)生形變，同時(shí)3D對(duì)象會(huì)改變外觀，暗示互動(dòng)性；而通過(guò)鼠標(biāo)模擬Cardboard按鈕點(diǎn)擊事件還可以使3D對(duì)象產(chǎn)生位移。大致就是這樣。如果有興趣打包成app放到iPhone當(dāng)中，便可以直接塞到Cardboard里面以真實(shí)VR的方式進(jìn)行體驗(yàn)了。提煉一下具體的實(shí)踐要點(diǎn)，包括：o 向Unity項(xiàng)目中導(dǎo)入Google VRUnity SDK。o 在Unity Asset Store中瀏覽并下載免費(fèi)資源包。o 調(diào)用Google VR相關(guān)組件，構(gòu)建VR模式。o 向場(chǎng)景(Scene)中添加交互對(duì)象。o 編寫(xiě)代碼，制定凝視交互的規(guī)則。o 構(gòu)建事件系統(tǒng)及觸發(fā)規(guī)則。o 通過(guò)Xcode將VR app部署到iPhone當(dāng)中。需要準(zhǔn)備的原料o Unity：下載并安裝最新的免費(fèi)個(gè)人版本。o Google VR Unity SDK：下載并解壓，其中包含了SDK以及Google官方提供范例項(xiàng)目。o Cardboard：Google Cardboard或其他同類設(shè)備均可。o Xcode：用于將最終打包的app部署到iPhone當(dāng)中。體量龐大，如果不準(zhǔn)備實(shí)際部署也可忽略。布置3D環(huán)境與交互組件打開(kāi)Unity，新建3D項(xiàng)目：點(diǎn)擊菜單欄中的Assets Import Package Custom Package，選擇之前解壓縮的Google VR Unity SDK當(dāng)中的GoogleVRForUnity.unitypackage：在接下來(lái)彈出的Import Unity Package對(duì)話框中，確保所有資源都有被勾選，然后點(diǎn)擊Import按鈕：導(dǎo)入完成后，Project面板當(dāng)中的資源路徑看上去應(yīng)該是這樣的：Google VR Unity SDK布置完畢，下面我們來(lái)找一些現(xiàn)成的環(huán)境素材。點(diǎn)擊Asset Store面板，在內(nèi)嵌頁(yè)面的右側(cè)導(dǎo)航當(dāng)中找到3D Models Enviroments，接下來(lái)可以篩選出所有的免費(fèi)模型，找到自己喜歡的，確認(rèn)資源中包含.unity場(chǎng)景文件，例如下圖當(dāng)中我所選用的Moon Landscape資源包所提供的Demo Scene(接下來(lái)所涉及到的相關(guān)文件操作均以Moon Landscape為例)：建議在這里掛好VPN，然后點(diǎn)擊內(nèi)嵌頁(yè)中的Download或Import(如果之前已經(jīng)下載過(guò))按鈕。下載完成后，在彈出的Import Unity Package對(duì)話框中，確保所有資源都有被勾選，然后點(diǎn)擊Import按鈕：導(dǎo)入完成后，在Project面板的Assets管理器當(dāng)中找到剛剛下載的資源包里的demo場(chǎng)景文件：雙擊打開(kāi)該文件，Scene面板當(dāng)中會(huì)出現(xiàn)demo場(chǎng)景，我們接下來(lái)就在這里工作：想要置身于3D環(huán)境當(dāng)中以第一人稱視角觀察世界，我們需要“眼睛”，即Unity提供的Camera控件。新建的空白場(chǎng)景當(dāng)中不包含任何Camera控件，我們需要自己來(lái)添加。點(diǎn)擊菜單欄當(dāng)中的Game Object Camera：確保新添加的Camera控件被選中(如果沒(méi)有，可以在左側(cè)Hierarchy面板當(dāng)中點(diǎn)選)，在右側(cè)Inspector面板當(dāng)中點(diǎn)擊Tag下拉菜單，選擇“MainCamera”：由于Moon Landscape場(chǎng)景當(dāng)中的地形會(huì)高出水平面，所以我們需要調(diào)整Camera的位置，使其位于地面以上。在“Postion”當(dāng)中，為“Y”輸入恰當(dāng)?shù)臄?shù)值，譬如“25”(或任何能夠確保Camera垂直方向的位置略微高出地面的數(shù)值)：同樣在Inspector面板當(dāng)中，點(diǎn)擊底部的Add Component按鈕，輸入關(guān)鍵詞“Physics”，點(diǎn)選“Physics Raycaster”(使Camera視線可以與3D對(duì)象進(jìn)行互動(dòng))：一番設(shè)置之后，Camera控件的Inspector面板看上去應(yīng)該是這樣的：接下來(lái)我們需要添加Google VR相關(guān)組件。在Project面板的資源列表中找到Assets GoogleVR Prefabs文件夾，將其中的GvrViewerMain拖放到左側(cè)的Hierarchy面板中(這一步驟相當(dāng)于為Unity項(xiàng)目添加Google VR模式，包括視覺(jué)樣式及互動(dòng)機(jī)制等等)：確保GvrViewerMain被選中，在右側(cè)Inspector面板當(dāng)中調(diào)整“Screen Size”和“Viewer Type”的值，選擇需要部署的手機(jī)型號(hào)及Cardboard款式：接下來(lái)我們要向Camera視野當(dāng)中添加準(zhǔn)星，用于接下來(lái)的凝視交互。在Project面板的資源列表中找到Assets GoogleVR Prefabs UI文件夾，將其中的GvrReticle拖放到左側(cè)Hierarchy面板中的Camera控件上，使其成為Camera的子元素：OK我們來(lái)預(yù)覽一下當(dāng)前場(chǎng)景的實(shí)際效果。點(diǎn)擊頂部的Play按鈕，界面會(huì)自動(dòng)切換到Game模式。夜空、月球表面、Cardboard分屏、準(zhǔn)星，還不壞(此時(shí)可以按住鍵盤上的alt或control鍵，同時(shí)移動(dòng)鼠標(biāo)，測(cè)試一下主視角的移動(dòng)方式)：再次點(diǎn)擊頂部的Play按鈕，退出Game模式。接下來(lái)我們要向場(chǎng)景當(dāng)中添加互動(dòng)對(duì)象。立方體(Cube)是Unity當(dāng)中最基礎(chǔ)最簡(jiǎn)單的3D對(duì)象 點(diǎn)擊菜單欄當(dāng)中的Game Object 3D Object Cube，一個(gè)立方體便會(huì)被添加到場(chǎng)景當(dāng)中：我們需要將立方體置于Camera默認(rèn)視線的前方(選中Camera控件即可查看其視野方向及范圍，便于確定“前方”的具體位置)。此外，冷寂的月球環(huán)境讓我想到了2001太空漫游當(dāng)中的一些情景(斯坦利庫(kù)布里克指導(dǎo)，1968年的鴻篇巨制，有誰(shuí)看過(guò)沒(méi)？)，于是我希望將立方體修改為電影中的黑石碑樣式。選中Cube，在右側(cè)Inspector面板當(dāng)中調(diào)整“Position”和“Scale”的值：調(diào)整之后Cube的形狀與位置大致如下圖所示：在這個(gè)簡(jiǎn)單的范例當(dāng)中，3D環(huán)境及交互組件就是這些。下面我們要做一些代碼工作了。編寫(xiě)代碼，設(shè)定交互規(guī)則在Assets面板當(dāng)中點(diǎn)擊鼠標(biāo)右鍵，選擇Create C# Script，將新添加的代碼文件命名為“Interactions”：雙擊該文件，Unity會(huì)自動(dòng)加載MonoDevelop代碼編輯器。清除掉文件當(dāng)中自帶的全部?jī)?nèi)容，替換為以下代碼： using UnityEngine; using System.Collections;public class Interactions : MonoBehaviour public void SetGazedAt(bool gazedAt) GetComponent().material.color = gazedAt ? Color.red : Color.black; public void MoveUp() transform.position += new Vector3 (0f, 1f, 0f); void Start() SetGazedAt(false); public void OnGazeEnter() SetGazedAt(true); public void OnGazeExit() SetGazedAt(false); public void OnGazeTrigger() MoveUp(); 代碼本身并不復(fù)雜，簡(jiǎn)單解釋一下邏輯。我們?cè)贗nteractions類當(dāng)中總共聲明了6個(gè)函數(shù)：o SetGazeAt()：根據(jù)傳入的條件，判斷交互對(duì)象(譬如立方體)應(yīng)該呈現(xiàn)出紅色還是黑色外觀。o MoveUp()：將交互對(duì)象沿Y軸向上移動(dòng)一個(gè)單位的距離。o Start()：調(diào)用特定的功能進(jìn)行初始化設(shè)定(SetGazeAt，參數(shù)為“false”)。o OnGazeEnter()：當(dāng)準(zhǔn)星聚焦于交互對(duì)象時(shí)，調(diào)用特定的功能(SetGazeAt，參數(shù)為“true”)。o OnGazeExit()：當(dāng)準(zhǔn)星不再聚焦于交互對(duì)象時(shí)，調(diào)用特定的功能(SetGazeAt，參數(shù)為“false”)。o OnGazeTrigger()：準(zhǔn)星聚焦于交互對(duì)象時(shí)，用戶按壓Cardboard上的按鈕，則調(diào)用特定的功能(MoveUp)。構(gòu)建事件系統(tǒng)代碼搞定，接下來(lái)需要將事件處理系統(tǒng)添加到項(xiàng)目當(dāng)中，使交互規(guī)則可以在視線與交互對(duì)象之間運(yùn)作起來(lái)。點(diǎn)擊菜單欄當(dāng)中的Game Object UI Event System，將其添加到左側(cè)的Hierarchy面板中：確保Event System處于選中態(tài)，在右側(cè)Inspector面板當(dāng)中點(diǎn)擊底部的Add Component按鈕，輸入關(guān)鍵詞“Gaze”，點(diǎn)選“GazeInputModule”，向事件系統(tǒng)中添加基于凝視的交互模組：我們需要提升凝視交互規(guī)則的優(yōu)先級(jí)，使其不會(huì)被默認(rèn)規(guī)則覆蓋，否則在實(shí)際注視Cube對(duì)象時(shí)，準(zhǔn)星的行為會(huì)有異常。點(diǎn)擊“Gaze Input Module”標(biāo)題右側(cè)的齒輪圖標(biāo)，在下拉列表中選擇“Move Up”，使“Gaze Input Module”整體移至“Standalone Input Module”上方：我們還需要使Cube能夠響應(yīng)代碼定義的交互事件規(guī)則。在左側(cè)的Hierarchy面板中選中Cube對(duì)象，在右側(cè)Inspector面板當(dāng)中點(diǎn)擊底部的Add Component按鈕，找到“Interactions”，將代碼添加到Cube對(duì)象當(dāng)中：再次點(diǎn)擊Add Component按鈕，輸入“Event”，點(diǎn)選“Event Trigger”：接下來(lái)我們需要將特定的交互動(dòng)作與代碼中設(shè)定的規(guī)則關(guān)聯(lián)起來(lái)。點(diǎn)擊Add New Event Type按鈕，選擇“PointerEnter”：點(diǎn)擊“None (Object)”右側(cè)的按鈕，在彈出的列表當(dāng)中選擇“Cube”自身：然后在右側(cè)的Function列表中選擇Interactions OnGazeEnter()，也就是我們之前在Interactions代碼文件當(dāng)中定義的OnGazeEnter函數(shù)：這一系列設(shè)置相當(dāng)于告訴系統(tǒng)，當(dāng)準(zhǔn)星移動(dòng)到Cube對(duì)象上時(shí)，執(zhí)行OnGazeEnter函數(shù)當(dāng)中定義的行為，即通過(guò)SetGazeAt()將Cube的外觀設(shè)置為紅色。同理，我們還需要告訴系統(tǒng)當(dāng)準(zhǔn)星離開(kāi)Cube對(duì)象時(shí)，或是在Cube對(duì)象上按壓Cardboard按鈕時(shí)需要執(zhí)行怎樣的行為。點(diǎn)擊“Event Trigger”底部的Add New Event Type按鈕，選擇“PointerExit”：確保事件對(duì)象為“Cube”，然后在右側(cè)的Function列表中選擇Interactions OnGazeExit()：同理，再次點(diǎn)擊“Event Trigger”底部的Add New Event Type按鈕，選擇“PointerClick”：確保事件對(duì)象為“Cube”，然后在右側(cè)的Function列表中選擇Interactions OnGazeTrigger()：預(yù)覽至此，我們的范例已經(jīng)基本完工，不如預(yù)覽一下自己的工作成果。點(diǎn)擊頂部的Play按鈕，進(jìn)入Game模式：按住alt鍵，同時(shí)移動(dòng)鼠標(biāo)，使準(zhǔn)星聚焦于黑石碑，會(huì)發(fā)現(xiàn)石碑變成了紅色，準(zhǔn)星本身也變成了環(huán)狀(提示所注視的對(duì)象具有交互特性)：點(diǎn)按鼠標(biāo)，石碑會(huì)一點(diǎn)點(diǎn)升起：說(shuō)無(wú)聊也是夠無(wú)聊的，但事已至此，完全可以給自己一點(diǎn)掌聲，因?yàn)槲覀儗W(xué)會(huì)了一些很基礎(chǔ)同時(shí)也很重要的東西。你還可以繼續(xù)嘗試做些額外的工作，譬如復(fù)制幾個(gè)石碑，排成一行，看上去會(huì)很酷，同時(shí)也可以幫你了解在Unity當(dāng)中操作3D對(duì)象的基本方法。如果無(wú)需擔(dān)心設(shè)備的性能問(wèn)題，又足夠無(wú)聊，復(fù)制出幾萬(wàn)個(gè)黑石碑，混亂的堆放起來(lái)，像2010太空漫游(2001太空漫游續(xù)作)那樣將整個(gè)星球完全吞噬掉也無(wú)妨。打包app，在iPhone上運(yùn)行接下來(lái)的步驟屬于選做作業(yè)，如果手頭有Cardboard，那么實(shí)際體驗(yàn)一下終歸會(huì)更有成就感一些。具體的實(shí)現(xiàn)流程和之前“Unity與Cardboard app基礎(chǔ)實(shí)踐(1)”當(dāng)中介紹的相同。點(diǎn)擊菜單欄中的File Build Settings：在Build Settings窗口中，選擇Platforms列表里的“iOS”，然后點(diǎn)擊列表下方的Switch Platform按鈕：等待素材導(dǎo)入完成，然后點(diǎn)擊Build Settings窗口中的Player Settings按鈕，此時(shí)右側(cè)的Inspector面板當(dāng)中會(huì)出現(xiàn)PlayerSettings選項(xiàng)區(qū)：找到“Settings for iOS”部分，點(diǎn)擊其中的“Resolution and Presentation”使其展開(kāi)，將“Default Orientation”設(shè)置為“Auto Rotation”，然后取消勾選“Allowed Orientat