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

1、谷歌VR APP實(shí)戰(zhàn)！UNITY與CARDBOARD APP基礎(chǔ)實(shí)踐（三）今天的VR實(shí)戰(zhàn)是騰訊ISUX高級(jí)交互家設(shè)計(jì)師C7210親自寫的，教你借用免費(fèi)的Unity資源，搭起3D場(chǎng)景，放上3D對(duì)象，并使用Google提供的SDK組件模擬VR視野。這個(gè)教程最好玩的地方是，如果有興趣打包成App放到iPhone當(dāng)中，便可以直接塞到Cardboard里面以真實(shí)VR的方式進(jìn)行體驗(yàn)了我們接下來將要一起搗鼓的東西，簡(jiǎn)單描述一下大約就是借來一些免費(fèi)的Unity資源，搭起3D場(chǎng)景，在里面放上一兩個(gè)沒有任何意義的3D對(duì)象，使用Google提供的SDK組件模擬VR視野，當(dāng)視線聚焦在3D對(duì)象上時(shí)，VR準(zhǔn)星會(huì)發(fā)生形變，

2、同時(shí)3D對(duì)象會(huì)改變外觀，暗示互動(dòng)性；而通過鼠標(biāo)模擬Cardboard按鈕點(diǎn)擊事件還可以使3D對(duì)象產(chǎn)生位移。大致就是這樣。如果有興趣打包成app放到iPhone當(dāng)中，便可以直接塞到Cardboard里面以真實(shí)VR的方式進(jìn)行體驗(yàn)了。提煉一下具體的的實(shí)踐要點(diǎn)，包包括：向Unity項(xiàng)項(xiàng)目中導(dǎo)入GGooglee VRUUnity SDK。在Unity Assett Storre中瀏覽并并下載免費(fèi)資資源包。調(diào)用Googlle VR相相關(guān)組件，構(gòu)構(gòu)建VR模式。向場(chǎng)景(Sceene)中添添加交互對(duì)象象。編寫代碼，制定定凝視交互的的規(guī)則。構(gòu)建事件系統(tǒng)及及觸發(fā)規(guī)則。通過Xcodee將VR appp部署到iPhho

3、ne當(dāng)中中。需要準(zhǔn)備的原料料Unity：下下載并安裝最最新的免費(fèi)個(gè)個(gè)人版本。Google VR Unnity SSDK：下載載并解壓，其其中包含了SSDK以及Googgle官方提提供范例項(xiàng)目目。Cardboaard：Googlle Carrdboarrd或其他同同類設(shè)備均可可。Xcode：用用于將最終打打包的appp部署到iPhhone當(dāng)中中。體量龐大大，如果不準(zhǔn)準(zhǔn)備實(shí)際部署署也可忽略。布置3D環(huán)境與與交互組件打開Unityy，新建3D項(xiàng)目：點(diǎn)擊菜單欄中的的Assetts IImportt Packkage Custtom Paackagee，選擇之前解解壓縮的Gooogle VVR Unii

4、ty SDDK當(dāng)中的GooogleVRRForUnnity.uunityppackagge：在接下來彈出的的Imporrt Uniity Paackagee對(duì)話框中，確確保所有資源源都有被勾選選，然后點(diǎn)擊擊Imporrt按鈕：導(dǎo)入完成后，PProjecct面板當(dāng)中中的資源路徑徑看上去應(yīng)該該是這樣的：Google VR Unnity SSDK布置完完畢，下面我我們來找一些些現(xiàn)成的環(huán)境境素材。點(diǎn)擊擊Assett Storre面板，在在內(nèi)嵌頁面的右側(cè)側(cè)導(dǎo)航當(dāng)中找找到3D MModelss Ennviromments，接接下來可以篩篩選出所有的的免費(fèi)模型，找找到自己喜歡歡的，確認(rèn)資資源中包含.unit

5、yy場(chǎng)景文件，例例如下圖當(dāng)中中我所選用的的Moon Landsscape資資源包所提供供的Demoo Scenne(接下來來所涉及到的的相關(guān)文件操操作均以Mooon Laandscaape為例)：建議在這里掛好好VPN，然后后點(diǎn)擊內(nèi)嵌頁頁中的Downlload或Imporrt(如果之之前已經(jīng)下載載過)按鈕。下載載完成后，在在彈出的Immport Unityy Packkage對(duì)話話框中，確保保所有資源都都有被勾選，然然后點(diǎn)擊Immport按按鈕：導(dǎo)入完成后，在在Projeect面板的的Assetts管理器當(dāng)當(dāng)中找到剛剛剛下載的資源源包里的deemo場(chǎng)景文文件：雙擊打開該文件件，Scenne面板

6、當(dāng)中中會(huì)出現(xiàn)deemo場(chǎng)景，我我們接下來就就在這里工作作：想要置身于3DD環(huán)境當(dāng)中以以第一人稱視視角觀察世界界，我們需要要“眼睛”，即Unitty提供的Cammera控件件。新建的空空白場(chǎng)景當(dāng)中中不包含任何何Camerra控件，我我們需要自己己來添加。點(diǎn)點(diǎn)擊菜單欄當(dāng)當(dāng)中的Gamme Objject Cameera：確保新添加的CCameraa控件被選中中(如果沒有，可可以在左側(cè)HHierarrchy面板板當(dāng)中點(diǎn)選)，在右側(cè)Innspecttor面板當(dāng)當(dāng)中點(diǎn)擊Taag下拉菜單單，選擇“MainCCameraa”：由于Moon Landsscape場(chǎng)場(chǎng)景當(dāng)中的地地形會(huì)高出水水平面，所以以我們需要調(diào)

7、調(diào)整Cameera的位置置，使其位于于地面以上。在在“Postiion”當(dāng)中，為“YY”輸入恰當(dāng)當(dāng)?shù)臄?shù)值，譬譬如“25”(或任何能夠夠確保Cammera垂直直方向的位置置略微高出地地面的數(shù)值)：同樣在Insppectorr面板當(dāng)中，點(diǎn)點(diǎn)擊底部的AAdd Coomponeent按鈕，輸輸入關(guān)鍵詞“PPhysiccs”，點(diǎn)選選“Physsics RRaycasster”(使Camerra視線可以以與3D對(duì)象進(jìn)行行互動(dòng))：一番設(shè)置之后，Camera控件的Inspector面板看上去應(yīng)該是這樣的：接下來我們需要要添加Gooogle VVR相關(guān)組件件。在Prooject面面板的資源列列表中找到AAsse

8、tss GooogleVVR PPrefabbs文件夾，將將其中的GvvrViewwerMaiin拖放到左左側(cè)的Hieerarchhy面板中(這一步驟相相當(dāng)于為Unnity項(xiàng)目目添加Gooogle VVR模式，包包括視覺樣式式及互動(dòng)機(jī)制制等等)：確保GvrViiewerMMain被選選中，在右側(cè)側(cè)Inspeector面面板當(dāng)中調(diào)整整“Screeen Siize”和“Viewwer Tyype”的值值，選擇需要要部署的手機(jī)機(jī)型號(hào)及Caardboaard款式：接下來我們要向向Camerra視野當(dāng)中中添加準(zhǔn)星，用用于接下來的的凝視交互。在在Projeect面板的的資源列表中中找到Asssets Go

9、oggleVR Preefabs UI文文件夾，將其其中的GvrrReticcle拖放到到左側(cè)Hieerarchhy面板中的的Camerra控件上，使使其成為Caamera的的子元素：OK我們來預(yù)覽覽一下當(dāng)前場(chǎng)場(chǎng)景的實(shí)際效效果。點(diǎn)擊頂頂部的Plaay按鈕，界界面會(huì)自動(dòng)切切換到Gamme模式。夜夜空、月球表表面、Carrdboarrd分屏、準(zhǔn)準(zhǔn)星，還不壞壞(此時(shí)可以按按住鍵盤上的的alt或contrrol鍵，同同時(shí)移動(dòng)鼠標(biāo)標(biāo)，測(cè)試一下下主視角的移移動(dòng)方式)：再次點(diǎn)擊頂部的的Play按鈕鈕，退出Gaame模式。接接下來我們要要向場(chǎng)景當(dāng)中中添加互動(dòng)對(duì)對(duì)象。立方體體(Cubee)是Unityy當(dāng)中最基

10、礎(chǔ)最簡(jiǎn)單單的3D對(duì)象 點(diǎn)擊菜菜單欄當(dāng)中的的Game Objecct 33D Objject Cubee，一個(gè)立方方體便會(huì)被添添加到場(chǎng)景當(dāng)當(dāng)中：我們需要將立方方體置于Caamera默默認(rèn)視線的前前方(選中Cameera控件即即可查看其視視野方向及范范圍，便于確確定“前方”的具體位置置)。此外，冷冷寂的月球環(huán)環(huán)境讓我想到到了20001太空漫游游當(dāng)中的一一些情景(斯坦利庫布里克指指導(dǎo)，19668年的鴻篇篇巨制，有誰誰看過沒？)，于是我希希望將立方體體修改為電影影中的黑石碑碑樣式。選中中Cube，在在右側(cè)Insspectoor面板當(dāng)中中調(diào)整“Poositioon”和“Scalle”的值：調(diào)整之后Cub

11、be的形狀與與位置大致如如下圖所示：在這個(gè)簡(jiǎn)單的范范例當(dāng)中，33D環(huán)境及交交互組件就是是這些。下面面我們要做一一些代碼工作作了。編寫代碼，設(shè)定定交互規(guī)則在Assetss面板當(dāng)中點(diǎn)點(diǎn)擊鼠標(biāo)右鍵鍵，選擇Crreate C# Scrippt，將新添添加的代碼文文件命名為“IInteraactionns”：雙擊該文件，UUnity會(huì)會(huì)自動(dòng)加載MMonoDeevelopp代碼編輯器器。清除掉文文件當(dāng)中自帶帶的全部?jī)?nèi)容容，替換為以以下代碼： using UnityyEnginne; using Systeem.Colllectiions;public classs Inteeractiions : Mon

12、ooBehavviour public void SetGaazedAtt(bool gazeddAt) GetCommponennt().mateerial.colorr = gazzedAt ? Collor.reed : Colorr.blacck; public void MoveUUp() transfform.ppositiion += new Vectoor3 (00f, 1ff, 0f); void Sttart() SetGazzedAt(falsee); public void OnGazzeEnteer() SetGazzedAt(true); public void O

13、nGazzeExitt() SetGazzedAt(falsee); public void OnGazzeTriggger() MoveUpp(); 代碼本身并不復(fù)復(fù)雜，簡(jiǎn)單解解釋一下邏輯輯。我們?cè)贗Interaactionns類當(dāng)中總總共聲明了66個(gè)函數(shù)：SetGazeeAt()：根據(jù)傳傳入的條件，判判斷交互對(duì)象象(譬如立方體體)應(yīng)該呈現(xiàn)出出紅色還是黑黑色外觀。MoveUp()：將交互互對(duì)象沿Y軸向上移動(dòng)動(dòng)一個(gè)單位的的距離。Start()：調(diào)用特定定的功能進(jìn)行行初始化設(shè)定定(SetGaazeAt，參參數(shù)為“faalse”)。OnGazeEEnter()：當(dāng)準(zhǔn)星星聚焦于交互互對(duì)象時(shí)，調(diào)調(diào)用特

14、定的功功能(SetGaazeAt，參參數(shù)為“trrue”)。OnGazeEExit()：當(dāng)準(zhǔn)星不不再聚焦于交交互對(duì)象時(shí)，調(diào)調(diào)用特定的功功能(SetGaazeAt，參參數(shù)為“faalse”)。OnGazeTTriggeer()：準(zhǔn)星聚聚焦于交互對(duì)對(duì)象時(shí)，用戶戶按壓Carrdboarrd上的按鈕鈕，則調(diào)用特特定的功能(MoveUUp)。構(gòu)建事件系統(tǒng)代碼搞定，接下下來需要將事事件處理系統(tǒng)統(tǒng)添加到項(xiàng)目目當(dāng)中，使交交互規(guī)則可以以在視線與交交互對(duì)象之間間運(yùn)作起來。點(diǎn)點(diǎn)擊菜單欄當(dāng)當(dāng)中的Gamme Objject UI Evennt Sysstem，將將其添加到左左側(cè)的Hieerarchhy面板中：確保Eve

15、ntt Systtem處于選選中態(tài)，在右右側(cè)Insppectorr面板當(dāng)中點(diǎn)點(diǎn)擊底部的AAdd Coomponeent按鈕，輸輸入關(guān)鍵詞“GGaze”，點(diǎn)點(diǎn)選“GazeIInputMModulee”，向事件系統(tǒng)中中添加基于凝凝視的交互模模組：我們需要提升凝凝視交互規(guī)則則的優(yōu)先級(jí)，使使其不會(huì)被默默認(rèn)規(guī)則覆蓋蓋，否則在實(shí)實(shí)際注視Cuube對(duì)象時(shí)時(shí)，準(zhǔn)星的行行為會(huì)有異常常。點(diǎn)擊“GGaze IInput Modulle”標(biāo)題右右側(cè)的齒輪圖圖標(biāo)，在下拉拉列表中選擇擇“Movee Up”，使使“Gazee Inpuut Moddule”整整體移至“SStandaalone Inputt Moduule”

16、上方方：我們還需要使CCube能夠夠響應(yīng)代碼定定義的交互事事件規(guī)則。在在左側(cè)的Hiierarcchy面板中中選中Cubbe對(duì)象，在在右側(cè)Insspectoor面板當(dāng)中中點(diǎn)擊底部的的Add CComponnent按鈕鈕，找到“IInteraactionns”，將代代碼添加到CCube對(duì)象象當(dāng)中：再次點(diǎn)擊Addd Compponentt按鈕，輸入入“Evennt”，點(diǎn)選選“Evennt Triigger”：接下來我們需要要將特定的交交互動(dòng)作與代代碼中設(shè)定的的規(guī)則關(guān)聯(lián)起起來。點(diǎn)擊AAdd Neew Eveent Tyype按鈕，選選擇“PointterEntter”：點(diǎn)擊“Nonee (Objjec

17、t)”右側(cè)的按鈕，在彈出的列表當(dāng)中選擇“Cube”自身：然后在右側(cè)的FFunctiion列表中中選擇Intteracttions OnGGazeEnnter()，也就是我我們之前在IInteraactionns代碼文件件當(dāng)中定義的的OnGazzeEnteer函數(shù)：這一系列設(shè)置相相當(dāng)于告訴系系統(tǒng)，當(dāng)準(zhǔn)星星移動(dòng)到Cuube對(duì)象上上時(shí)，執(zhí)行OOnGazeeEnterr函數(shù)當(dāng)中定定義的行為，即即通過SettGazeAAt()將Cube的外外觀設(shè)置為紅紅色。同理，我們還需需要告訴系統(tǒng)統(tǒng)當(dāng)準(zhǔn)星離開開Cube對(duì)象象時(shí)，或是在在Cube對(duì)象象上按壓Caardboaard按鈕時(shí)時(shí)需要執(zhí)行怎怎樣的行為。點(diǎn)擊“Ev

18、ennt Triigger”底部的Add New Event Type按鈕，選擇“PointerExit”：確保事件對(duì)象為為“Cubee”，然后在在右側(cè)的Fuunctioon列表中選選擇Inteeractiions OnGaazeExiit()：同理，再次點(diǎn)擊擊“Evennt Triigger”底部的Add New Event Type按鈕，選擇“PointerClick”：確保事件對(duì)象為為“Cubee”，然后在在右側(cè)的Fuunctioon列表中選選擇Inteeractiions OnGaazeTriigger()：預(yù)覽至此，我們的范范例已經(jīng)基本本完工，不如如預(yù)覽一下自自己的工作成成果。點(diǎn)擊頂

19、頂部的Plaay按鈕，進(jìn)進(jìn)入Gamee模式：按住alt鍵，同同時(shí)移動(dòng)鼠標(biāo)標(biāo)，使準(zhǔn)星聚聚焦于黑石碑碑，會(huì)發(fā)現(xiàn)石石碑變成了紅紅色，準(zhǔn)星本本身也變成了了環(huán)狀(提示所注視視的對(duì)象具有有交互特性)：點(diǎn)按鼠標(biāo)，石碑碑會(huì)一點(diǎn)點(diǎn)升升起：說無聊也是夠無無聊的，但事事已至此，完完全可以給自自己一點(diǎn)掌聲聲，因?yàn)槲覀儌儗W(xué)會(huì)了一些些很基礎(chǔ)同時(shí)也也很重要的東東西。你還可可以繼續(xù)嘗試試做些額外的的工作，譬如如復(fù)制幾個(gè)石石碑，排成一一行，看上去去會(huì)很酷，同時(shí)也也可以幫你了了解在Uniity當(dāng)中操操作3D對(duì)象的基基本方法。如如果無需擔(dān)心心設(shè)備的性能能問題，又足足夠無聊，復(fù)復(fù)制出幾萬個(gè)個(gè)黑石碑，混混亂的堆放起起來，像22010太

20、空空漫游(2001太空空漫游續(xù)作作)那樣將整個(gè)個(gè)星球完全吞吞噬掉也無妨妨。打包app，在在iPhonne上運(yùn)行接下來的步驟屬屬于選做作業(yè)業(yè)，如果手頭頭有Carddboardd，那么實(shí)際際體驗(yàn)一下終終歸會(huì)更有成成就感一些。具具體的實(shí)現(xiàn)流流程和之前“UUnity與與Cardbboard app基礎(chǔ)礎(chǔ)實(shí)踐(1)”當(dāng)中介紹紹的相同。點(diǎn)擊菜單欄中的的File Buiild Seettinggs：在Build Settiings窗口口中，選擇PPlatfoorms列表表里的“iOS”，然后點(diǎn)擊擊列表下方的的Switcch Plaatformm按鈕：等待素材導(dǎo)入完完成，然后點(diǎn)點(diǎn)擊Builld Setttingss窗口中的Pllayer Settiings按鈕鈕，此時(shí)右側(cè)側(cè)的Insppectorr面板當(dāng)中會(huì)會(huì)出現(xiàn)PlaayerSeettinggs選項(xiàng)區(qū)：找到“Setttings for iiOS”部分，點(diǎn)擊擊其中的“RResoluution and PPresenntatioon”使其展展開，將“DDefaullt Oriientattion”設(shè)設(shè)置為“Auuto Rootatioon”，然后后取消勾選“AAlloweed Oriientattions