編者按：今天的VR實戰(zhàn)是騰訊ISUX高級交互家設(shè)計師@C7210?親自寫的，教你借用免費的Unity資源，搭起3D場景，放上3D對象，并使用Google提供的SDK組件模擬VR視野。這個教程最好玩的地方是，如果有興趣打包成App放到iPhone當中，便可以直接塞到Cardboard里面以真實VR的方式進行體驗了。

歡迎關(guān)注譯者（高級交互設(shè)計師、貓奴、吉他手、鼓手、老狗、單身，現(xiàn)就職于騰訊ISUX）的微信公眾號：Beforweb

這兒有他的訪談：《優(yōu)設(shè)訪談！騰訊高級交互設(shè)計師C7210的十年設(shè)計路》

往期教程回顧：

1. 《谷歌VR APP實戰(zhàn)！UNITY與CARDBOARD APP基礎(chǔ)實踐（一）》
2. 《谷歌VR APP實戰(zhàn)！UNITY與CARDBOARD APP基礎(chǔ)實踐（二）》

“Unity與Cardboard app基礎(chǔ)實踐”的話題之前已經(jīng)做過兩期，均是譯文。第三期直接自己寫了，兩方面考慮：一是目前能看到的Cardboard實戰(zhàn)文章或視頻教程大多是基于舊版SDK，而非Daydream發(fā)布之后更新的大一統(tǒng)版本的“Google VR”SDK，時效性上有問題，翻譯過程中需要做大量的修改工作，包括代碼和配圖等等方面；另外自己也希望將之前學到的若干知識點匯總在一個完整的小范例當中進行實踐，既然方法已經(jīng)學到了，就整合到一起，一邊梳理一邊將流程分享出來。

我們接下來將要一起搗鼓的東西，簡單描述一下大約就是借來一些免費的Unity資源，搭起3D場景，在里面放上一兩個沒有任何意義的3D對象，使用Google提供的SDK組件模擬VR視野，當視線聚焦在3D對象上時，VR準星會發(fā)生形變，同時3D對象會改變外觀，暗示互動性；而通過鼠標模擬Cardboard按鈕點擊事件還可以使3D對象產(chǎn)生位移。大致就是這樣。如果有興趣打包成app放到iPhone當中，便可以直接塞到Cardboard里面以真實VR的方式進行體驗了。

提煉一下具體的實踐要點，包括：

• 向Unity項目中導入Google VR Unity SDK。
• 在Unity Asset Store中瀏覽并下載免費資源包。
• 調(diào)用Google VR相關(guān)組件，構(gòu)建VR模式。
• 向場景(Scene)中添加交互對象。
• 編寫代碼，制定凝視交互的規(guī)則。
• 構(gòu)建事件系統(tǒng)及觸發(fā)規(guī)則。
• 通過Xcode將VR app部署到iPhone當中。

需要準備的原料

• Unity：下載并安裝最新的免費個人版本。
• Google VR Unity SDK：下載并解壓，其中包含了SDK以及Google官方提供范例項目。
• Cardboard：Google Cardboard或其他同類設(shè)備均可。
• Xcode：用于將最終打包的app部署到iPhone當中。體量龐大，如果不準備實際部署也可忽略。

布置3D環(huán)境與交互組件

打開Unity，新建3D項目：

點擊菜單欄中的Assets > Import Package > Custom Package，選擇之前解壓縮的Google VR Unity SDK當中的GoogleVRForUnity.unitypackage：

在接下來彈出的Import Unity Package對話框中，確保所有資源都有被勾選，然后點擊Import按鈕：

導入完成后，Project面板當中的資源路徑看上去應該是這樣的：

Google VR Unity SDK布置完畢，下面我們來找一些現(xiàn)成的環(huán)境素材。點擊Asset Store面板，在內(nèi)嵌頁面的右側(cè)導航當中找到3D Models > Enviroments，接下來可以篩選出所有的免費模型，找到自己喜歡的，確認資源中包含.unity場景文件，例如下圖當中我所選用的Moon Landscape資源包所提供的Demo Scene(接下來所涉及到的相關(guān)文件操作均以Moon Landscape為例)：

點擊內(nèi)嵌頁中的Download或Import(如果之前已經(jīng)下載過)按鈕。下載完成后，在彈出的Import Unity Package對話框中，確保所有資源都有被勾選，然后點擊Import按鈕：

導入完成后，在Project面板的Assets管理器當中找到剛剛下載的資源包里的demo場景文件：

雙擊打開該文件，Scene面板當中會出現(xiàn)demo場景，我們接下來就在這里工作：

想要置身于3D環(huán)境當中以第一人稱視角觀察世界，我們需要“眼睛”，即Unity提供的Camera控件。新建的空白場景當中不包含任何Camera控件，我們需要自己來添加。點擊菜單欄當中的Game Object > Camera：

確保新添加的Camera控件被選中(如果沒有，可以在左側(cè)Hierarchy面板當中點選)，在右側(cè)Inspector面板當中點擊Tag下拉菜單，選擇“MainCamera”：

由于Moon Landscape場景當中的地形會高出水平面，所以我們需要調(diào)整Camera的位置，使其位于地面以上。在“Postion”當中，為“Y”輸入恰當?shù)臄?shù)值，譬如“25”(或任何能夠確保Camera垂直方向的位置略微高出地面的數(shù)值)：

同樣在Inspector面板當中，點擊底部的Add Component按鈕，輸入關(guān)鍵詞“Physics”，點選“Physics Raycaster”(使Camera視線可以與3D對象進行互動)：

一番設(shè)置之后，Camera控件的Inspector面板看上去應該是這樣的：

接下來我們需要添加Google VR相關(guān)組件。在Project面板的資源列表中找到Assets > GoogleVR > Prefabs文件夾，將其中的GvrViewerMain拖放到左側(cè)的Hierarchy面板中(這一步驟相當于為Unity項目添加Google VR模式，包括視覺樣式及互動機制等等)：

確保GvrViewerMain被選中，在右側(cè)Inspector面板當中調(diào)整“Screen Size”和“Viewer Type”的值，選擇需要部署的手機型號及Cardboard款式：

接下來我們要向Camera視野當中添加準星，用于接下來的凝視交互。在Project面板的資源列表中找到Assets > GoogleVR > Prefabs > UI文件夾，將其中的GvrReticle拖放到左側(cè)Hierarchy面板中的Camera控件上，使其成為Camera的子元素：

OK我們來預覽一下當前場景的實際效果。點擊頂部的Play按鈕，界面會自動切換到Game模式。夜空、月球表面、Cardboard分屏、準星，還不壞(此時可以按住鍵盤上的alt或control鍵，同時移動鼠標，測試一下主視角的移動方式)：

再次點擊頂部的Play按鈕，退出Game模式。接下來我們要向場景當中添加互動對象。立方體(Cube)是Unity當中最基礎(chǔ)最簡單的3D對象 - 點擊菜單欄當中的Game Object > 3D Object > Cube，一個立方體便會被添加到場景當中：

我們需要將立方體置于Camera默認視線的前方(選中Camera控件即可查看其視野方向及范圍，便于確定“前方”的具體位置)。此外，冷寂的月球環(huán)境讓我想到了《2001太空漫游》當中的一些情景(斯坦利·庫布里克指導，1968年的鴻篇巨制，有誰看過沒？)，于是我希望將立方體修改為電影中的黑石碑樣式。選中Cube，在右側(cè)Inspector面板當中調(diào)整“Position”和“Scale”的值：

調(diào)整之后Cube的形狀與位置大致如下圖所示：

在這個簡單的范例當中，3D環(huán)境及交互組件就是這些。下面我們要做一些代碼工作了。

編寫代碼，設(shè)定交互規(guī)則

在Assets面板當中點擊鼠標右鍵，選擇Create > C# Script，將新添加的代碼文件命名為“Interactions”：

雙擊該文件，Unity會自動加載MonoDevelop代碼編輯器。清除掉文件當中自帶的全部內(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();
 }

}

代碼本身并不復雜，簡單解釋一下邏輯。我們在Interactions類當中總共聲明了6個函數(shù)：

• SetGazeAt()：根據(jù)傳入的條件，判斷交互對象(譬如立方體)應該呈現(xiàn)出紅色還是黑色外觀。
• MoveUp()：將交互對象沿Y軸向上移動一個單位的距離。
• Start()：調(diào)用特定的功能進行初始化設(shè)定(SetGazeAt，參數(shù)為“false”)。
• OnGazeEnter()：當準星聚焦于交互對象時，調(diào)用特定的功能(SetGazeAt，參數(shù)為“true”)。
• OnGazeExit()：當準星不再聚焦于交互對象時，調(diào)用特定的功能(SetGazeAt，參數(shù)為“false”)。
• OnGazeTrigger()：準星聚焦于交互對象時，用戶按壓Cardboard上的按鈕，則調(diào)用特定的功能(MoveUp)。

構(gòu)建事件系統(tǒng)

代碼搞定，接下來需要將事件處理系統(tǒng)添加到項目當中，使交互規(guī)則可以在視線與交互對象之間運作起來。點擊菜單欄當中的Game Object > UI > Event System，將其添加到左側(cè)的Hierarchy面板中：

確保Event System處于選中態(tài)，在右側(cè)Inspector面板當中點擊底部的Add Component按鈕，輸入關(guān)鍵詞“Gaze”，點選“GazeInputModule”，向事件系統(tǒng)中添加基于凝視的交互模組：

我們需要提升凝視交互規(guī)則的優(yōu)先級，使其不會被默認規(guī)則覆蓋，否則在實際注視Cube對象時，準星的行為會有異常。點擊“Gaze Input Module”標題右側(cè)的齒輪圖標，在下拉列表中選擇“Move Up”，使“Gaze Input Module”整體移至“Standalone Input Module”上方：

我們還需要使Cube能夠響應代碼定義的交互事件規(guī)則。在左側(cè)的Hierarchy面板中選中Cube對象，在右側(cè)Inspector面板當中點擊底部的Add Component按鈕，找到“Interactions”，將代碼添加到Cube對象當中：

再次點擊Add Component按鈕，輸入“Event”，點選“Event Trigger”：

接下來我們需要將特定的交互動作與代碼中設(shè)定的規(guī)則關(guān)聯(lián)起來。點擊Add New Event Type按鈕，選擇“PointerEnter”：

點擊“None (Object)”右側(cè)的按鈕，在彈出的列表當中選擇“Cube”自身：

然后在右側(cè)的Function列表中選擇Interactions > OnGazeEnter()，也就是我們之前在Interactions代碼文件當中定義的OnGazeEnter函數(shù)：

這一系列設(shè)置相當于告訴系統(tǒng)，當準星移動到Cube對象上時，執(zhí)行OnGazeEnter函數(shù)當中定義的行為，即通過SetGazeAt()將Cube的外觀設(shè)置為紅色。

同理，我們還需要告訴系統(tǒng)當準星離開Cube對象時，或是在Cube對象上按壓Cardboard按鈕時需要執(zhí)行怎樣的行為。

點擊“Event Trigger”底部的Add New Event Type按鈕，選擇“PointerExit”：

確保事件對象為“Cube”，然后在右側(cè)的Function列表中選擇Interactions > OnGazeExit()：

同理，再次點擊“Event Trigger”底部的Add New Event Type按鈕，選擇“PointerClick”：

確保事件對象為“Cube”，然后在右側(cè)的Function列表中選擇Interactions > OnGazeTrigger()：

預覽

至此，我們的范例已經(jīng)基本完工，不如預覽一下自己的工作成果。點擊頂部的Play按鈕，進入Game模式：

按住alt鍵，同時移動鼠標，使準星聚焦于黑石碑，會發(fā)現(xiàn)石碑變成了紅色，準星本身也變成了環(huán)狀(提示所注視的對象具有交互特性)：

點按鼠標，石碑會一點點升起：

說無聊也是夠無聊的，但事已至此，完全可以給自己一點掌聲，因為我們學會了一些很基礎(chǔ)同時也很重要的東西。你還可以繼續(xù)嘗試做些額外的工作，譬如復制幾個石碑，排成一行，看上去會很酷，同時也可以幫你了解在Unity當中操作3D對象的基本方法。如果無需擔心設(shè)備的性能問題，又足夠無聊，復制出幾萬個黑石碑，混亂的堆放起來，像《2010太空漫游》(《2001太空漫游》續(xù)作)那樣將整個星球完全吞噬掉也無妨。

打包app，在iPhone上運行

接下來的步驟屬于選做作業(yè)，如果手頭有Cardboard，那么實際體驗一下終歸會更有成就感一些。具體的實現(xiàn)流程和之前“Unity與Cardboard app基礎(chǔ)實踐(1)”當中介紹的相同。

點擊菜單欄中的File > Build Settings：

在Build Settings窗口中，選擇Platforms列表里的“iOS”，然后點擊列表下方的Switch Platform按鈕：

等待素材導入完成，然后點擊Build Settings窗口中的Player Settings按鈕，此時右側(cè)的Inspector面板當中會出現(xiàn)PlayerSettings選項區(qū)：

找到“Settings for iOS”部分，點擊其中的“Resolution and Presentation”使其展開，將“Default Orientation”設(shè)置為“Auto Rotation”，然后取消勾選“Allowed Orientations for Auto Rotation”下的前三個選項，只保留最后一個“Landscape Left”為選中態(tài)：

仍然在“Settings for iOS”當中，點擊“Other Settings”使其展開，并找到“Bundle Identifier”字段，在這里為你的app輸入一個合法的安裝包名稱，譬如“com.mycompany.cardboarddemo”，只要遵循“com.<公司或組織名稱>.<app名稱>”的形式即可：

接下來要構(gòu)建用于部署到iOS設(shè)備當中的Xcode項目。在之前的Build Settings窗口中點擊Build按鈕，選擇恰當?shù)谋４嫖恢眉癤code項目路徑名稱，點擊Save按鈕：

看到“Build Successful”的系統(tǒng)消息之后，如果Xcode沒有自動加載，那么到Finder當中找到剛剛構(gòu)建好的Xcode項目文件夾，打開其中的.xcodeproj文件。用USB線連接好你的iPhone，在Xcode頂部的選項欄中選擇自己的iPhone設(shè)備，點擊Run按鈕，稍等片刻，我們的小范例便會化身為app出現(xiàn)在手機里面了(如果初次運行不成功，Xcode提示安全問題一類，那么需要到iPhone的“設(shè)置 > 通用 > 描述文件與設(shè)備管理”當中將范例app設(shè)置為信任)，塞進Cardboard遛遛看，雖然沒什么花頭，卻是自己一步步搗鼓出來的，會開心。

這一次，來自C我的實踐教程，就是這樣了，希望各位有所收獲。

「優(yōu)設(shè)VR設(shè)計好文合集」

VR入行手冊！
《VR快速入行手冊！可能是現(xiàn)在最全面的VR知識學習指南》

實戰(zhàn)教程：
《實戰(zhàn)教程來了！一名UX設(shè)計師的VR設(shè)計初體驗》

VR設(shè)計指南：
《教程來了！VR設(shè)計指南之基礎(chǔ)概念與設(shè)計工具》

原文地址：beforweb

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量160萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導航：http://hao.uisdc.com