Cardboard開發教程：使用Unity製作Cardboard全景圖片瀏覽器

天靖居士發表於2016-09-07
Unity瀏覽器

這兩年，虛擬現實（VR）領域很火，很多人認為這將會是下一個手機般改變人們生活的技術。目前全球最領先的還是Facebook旗下的Oculus，HTC VIVE，以及最流行的Cardboard。國內多家廠商也在此領域發力，暴風魔鏡就是其中的翹楚。今天這篇文章，就將從Cardboard入手，結合Google Cardboard for Unity SDK，在Unity中開發一個最簡單的全景圖片瀏覽器。

首先，能讓我在今天動手寫下這麼多的文字，要感謝以下幾篇文章，閱讀了這些文章作者的經驗之後，對我受益匪淺。以下是相關文章：

http://blog.csdn.net/column/details/cardboardvr.html

http://www.cnblogs.com/donghua/p/5060969.html

接下來進入正題，我將以Cardboard自帶的案例為基礎，在Unity中開發一個全景圖片瀏覽器。

要開發Cardboard，需要先去下載Android SDK，Cardboard SDK和Unity。Unity版本5.2.1之後並且能夠開發安卓平臺的遊戲即可。目前由於Google推出了Daydream平臺，一些內容和我當初開發的時候已經有一些不同了。下面是引導網址：

API Guide: https://developers.google.com/vr/unity/get-started-android

Cardboard SDK可以使用git下載：

git clone https://github.com/googlevr/gvr-unity-sdk.git

匯入資源：選單欄上Assets->Import Package->Custom Package，將SDK和Demo都匯入進來，匯入時點選import即可。

匯入後，從Project視窗中開啟DemoScene:

在根目錄下，即Assets，建立一個資料夾photo用來存放照片。Create->Folder:

同理建立Scripts用來存放指令碼。

將照片拖入Photo資料夾中。匯入完畢後，分別點選每一幅照片，在右邊導航欄選擇texture type為texture:

刪除Hierarchy視窗中左邊紅框範圍內的幾個物體。

再在Hierarchy視窗中新建兩個Sphere，分別命名為sphereleft和sphereright，代表左右眼看到的東西。右邊調整引數，將Rotation的Y值設為270度，這樣開啟後看到的是正面的圖片，否則是側面的。

在Inspector視窗中的Layer那裡點選，選擇add，新增圖層left和right，新增後，將sphere的圖層一一對應。

將photo中的照片分別拖動到sphere上，會自動生成materials資料夾。在Inspector視窗中設定sphere的shader屬性為cardboard/UnlitTexteture。

或者進入Materials資料夾，分別點選照片，修改Shader為Cardboard/UnlitTexture。

分別點選main camera left 和 right，設定cardboard eye屬性中，toggle culling mask。這個屬性的意思是遮蓋。因此，如圖，左眼應把右眼的圖層遮蓋看不見，所以左眼選擇right，同理，右眼選擇left。

主螢幕上，注意2D不要勾選，否則不太好除錯。

現在，點選播放按鈕，就可以看看效果了。

在Project視窗中，找到前面建立的Scripts資料夾，點選Create建立一個C# Script。命名為ChangePhoto，用來控制更新照片。

輸入程式碼如下：

public class ChangePhoto:MonoBehaviour
{
    public Material[] m_material=new Material[5];
    int photoID=0;

    public void PhotoAdd()// Next photo
    {
        if (photoID+1<=m_material.Length)
        {
            this.GetComponent<Renderer>().material=m_material[++photoID];
        }
    }

    public void PhotoMinus()// Last photo
    {
        if(photoID-1>=0)
        {
            this.GetComponent<Renderer>().material=m_material[--photoID];
        }
    }
}

　　

修改Hierarchy視窗中的按鈕，保留兩個，修改。分別點選text，修改文字，再修改Inspector視窗中的position，將Y值修改到合適的數字。

將寫好的指令碼分別拖動到sphereleft和sphereright上右邊如果Inspector視窗出現了ChangePhoto這個函式，說明成功。

分別設定兩個Sphere裡的ChangePhoto函式，Material的size為照片數目，再將AssetsàPhotoàMaterials資料夾裡的材質依次拖動到Element裡即可。

選擇Hierarchy視窗中的按鈕，看Inspector，有On Click()函式，點選+，新增一個物件，分別將sphereleft和sphereright拖動到下面，將按鈕和物體關聯，設定右邊的函式為相應的函式，即ChangePhotoàPhotoAdd

如果一切設定完畢，點選播放按鈕，看看效果。

最後是打包成apk。點選File，選擇Build Settings，在跳出來的視窗中選擇Android，並選擇Player Settings，在Inspector視窗中可以設定company name和product name。接著在下方找到Identification，修改Bundle Identifier，把Company和ProductName修改了。這個必須修改。設定好了就可以點選Build輸出了~

相關文章