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


這兩年,虛擬現實(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輸出了~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM