虛擬現(xiàn)實(shí)與增強(qiáng)現(xiàn)實(shí)開(kāi)發(fā)實(shí)戰(zhàn) 課件 第5、6章 AR飛機(jī)、VR古鎮(zhèn)

AR飛機(jī)案例素材準(zhǔn)備1.模型素材準(zhǔn)備本案例的制作需要用到飛機(jī)、城市群等模型，均可從本書(shū)配套的資源下載，下載后導(dǎo)入到項(xiàng)目中。2.音視頻素材準(zhǔn)備按鈕音效、背景音樂(lè)、飛機(jī)視頻介紹、游戲背景音樂(lè)等音視頻素材可從本書(shū)配套的資源下載，下載后導(dǎo)入到項(xiàng)目中。3.圖片素材準(zhǔn)備開(kāi)始界面、游戲加載界面、游戲背景、敵機(jī)、飛機(jī)、按鈕貼圖、虛擬立牌等圖片素材可從本書(shū)配套的資源下載，下載后導(dǎo)入到項(xiàng)目中。4.特效素材準(zhǔn)備飛機(jī)出場(chǎng)特效、虛擬立牌煙花特效、虛擬立牌雪花特效、噴泉特效等特效素材可從本書(shū)配套的資源下載，下載后導(dǎo)入到項(xiàng)目中。5.腳本素材準(zhǔn)備本案例涉及到的腳本素材可從本書(shū)配套的資源下載，下載后導(dǎo)入到項(xiàng)目中。AR飛機(jī)案例功能實(shí)現(xiàn)——AR手辦目錄content01單指旋轉(zhuǎn)模型功能02雙指縮放模型功能03虛擬按鈕功能04模型出場(chǎng)動(dòng)畫(huà)功能05模型拆分功能06飛機(jī)模型尾氣特效和出場(chǎng)特效功能PART01單指旋轉(zhuǎn)模型功能單指旋轉(zhuǎn)模型功能為了使模型在手機(jī)應(yīng)用中單指操作旋轉(zhuǎn)，需創(chuàng)建腳本RotateObject.cs，具體代碼如圖所示。將制作好的腳本文件綁定到飛機(jī)模型上，完成腳本綁定。PART02雙指縮放模型功能雙指縮放模型功能為了使模型在手機(jī)應(yīng)用中單指操作旋轉(zhuǎn)，需創(chuàng)建腳本Scale.cs，具體代碼如下所示。將制作好的腳本文件綁定到飛機(jī)模型上，如圖所示。PART03虛擬按鈕功能虛擬按鈕功能選擇LmageTarget，點(diǎn)擊AddVirtualButton添加虛擬按鈕。如圖所示。虛擬按鈕為透明狀態(tài)，為方便測(cè)試，在按鈕里添加plane,如圖所示。虛擬按鈕功能新建lmage,如圖所示。設(shè)置Canvas中PenderMode為WorldSpace，如圖所示。虛擬按鈕功能創(chuàng)建腳本PlayerBtn1,代碼下所示。將制作好的腳本文件綁定到飛機(jī)模型上。虛擬按鈕功能給虛擬按鈕添加點(diǎn)擊事件，并把交互的UI，并選擇SetActive(bool),如圖所示。PART04模型出場(chǎng)動(dòng)畫(huà)功能模型出場(chǎng)動(dòng)畫(huà)功能選擇飛機(jī)模型，添加動(dòng)畫(huà)，新建動(dòng)畫(huà)器。具體操作如圖所示。模型出場(chǎng)動(dòng)畫(huà)功能給飛機(jī)模型添加旋轉(zhuǎn)動(dòng)畫(huà)，修改Y軸數(shù)值，并打關(guān)鍵幀，具體操作如圖所示。模型出場(chǎng)動(dòng)畫(huà)功能取消循環(huán)播放，具體操作如圖所示。PART05模型拆分功能工作完成情況復(fù)制一份飛機(jī)模型，得到飛機(jī)（1），新建一個(gè)動(dòng)畫(huà)器，命名為fenjie,選擇飛機(jī)（1），并修改動(dòng)畫(huà)器為fenjie，具體操作如圖所示。工作完成情況選擇飛機(jī)（1）模型，添加動(dòng)畫(huà)，命名為fenjie。修改Z軸數(shù)值打關(guān)鍵幀，給飛機(jī)部件添加位置動(dòng)畫(huà)，具體操作如圖所示。工作完成情況選擇飛機(jī)（1）動(dòng)畫(huà)器，并將donghua拖入。右鍵黃色fenjie，選擇MakeTransition連接到fenjie0，右鍵fenjie0，選擇MakeTransition連接到fenjie（0），刪除fenjie的Motion，具體操作如圖所示。工作完成情況將fenjie動(dòng)畫(huà)設(shè)置為最開(kāi)始的動(dòng)畫(huà)并且循環(huán)播放，fenjie0動(dòng)畫(huà)則設(shè)置為有條件觸發(fā)（條件名Test），并且播放完一次后回到fenjie動(dòng)畫(huà)（即fenjie0自身不循環(huán)播放并設(shè)置返回路徑），以下不展示動(dòng)畫(huà)循環(huán)播放的設(shè)置（即在動(dòng)畫(huà)屬性界面勾選loop）工作完成情況新建一個(gè)按鈕，并調(diào)整大小位置，具體操作如圖所示。工作完成情況新建Player腳本，將制作好的腳本文件綁定到飛機(jī)（1）模型上，如圖所示。具體代碼和操作如下。工作完成情況將飛機(jī)（1）拖入Ani,具體操作如圖所示。選擇按鈕，添加點(diǎn)擊事件，并將飛機(jī)（1）拖入,選擇Player.Test，具體操作如下圖所示。PART06飛機(jī)模型尾氣特效出場(chǎng)特效功能模型拆分功能導(dǎo)入特效包，選擇所需要的特效掛載在飛機(jī)模型上，調(diào)整特效的位置大小和效果如圖所示。AR飛機(jī)案例功能實(shí)現(xiàn)——AR手冊(cè)目錄content01AR手冊(cè)功能之播放AR視頻功能02UI交互功能03AR手冊(cè)第三頁(yè)虛擬立牌04AR手冊(cè)第四頁(yè)虛擬立牌2PART01AR手冊(cè)功能之播放AR視頻功能AR手冊(cè)功能之播放AR視頻功能AR手冊(cè)功能之播放AR視頻功能新建ImageTraget(2)、plane、按鈕1重命名為暫停、按鈕2重命名為播放，再調(diào)整Plane和按鈕的大小位置，Canvas的RenderMode修改為WorldSpace,具體操作如圖所示。AR手冊(cè)功能之播放AR視頻功能將飛機(jī)介紹視頻賦予Plane，取消勾選PlayOnAwake。為暫停和播放按鈕添加點(diǎn)擊事件。PART02UI交互功能UI交互功能AR手冊(cè)第二頁(yè)飛機(jī)圖片簡(jiǎn)介、文字簡(jiǎn)介,點(diǎn)擊下一頁(yè)交互功能：如下圖新建ImageTraget(1)、Canvas、Image、Image(1)、Button，調(diào)整大小位置。UI交互功能給Button添加點(diǎn)擊事件，并且把Image(1)和Image(1)下面的Image隱藏起來(lái)。UI交互功能點(diǎn)擊圖片交互功能,在Image(1)和Image下再新建一個(gè)Button和Button1，刪除Button和Button1下的Text，調(diào)整按鈕的位置大小，再調(diào)整Button和Button1的透明度為0，最后給兩個(gè)按鈕添加點(diǎn)擊事件。PART03AR手冊(cè)第三頁(yè)虛擬立牌AR手冊(cè)第三頁(yè)虛擬立牌在第三頁(yè)的圖片識(shí)別目標(biāo)下新建一個(gè)畫(huà)布，命名為虛擬立牌。將新建的畫(huà)布的渲染模式由屏幕空間-覆蓋改為世界空間，并調(diào)節(jié)畫(huà)布的位置和大小AR手冊(cè)第三頁(yè)虛擬立牌虛擬立牌畫(huà)布里新建一個(gè)UI圖像，源圖像選擇立牌圖片素材，并調(diào)節(jié)立牌在畫(huà)布中的大小和位置AR手冊(cè)第三頁(yè)虛擬立牌新建一個(gè)畫(huà)布，命名為地面。將新建的畫(huà)布的渲染模式由屏幕空間-覆蓋改為世界空間，并調(diào)節(jié)畫(huà)布的位置和大小。地面畫(huà)布里新建一個(gè)UI圖像，源圖像選擇地面圖片素材，并調(diào)節(jié)地面在畫(huà)布中的大小和位置AR手冊(cè)第三頁(yè)虛擬立牌加入樹(shù)木、飛機(jī)模型等其他元素讓虛擬立牌場(chǎng)景更加豐富,并調(diào)節(jié)其大小和位置AR手冊(cè)第三頁(yè)虛擬立牌添加標(biāo)題加入煙花特效、給飛機(jī)模型制作飛機(jī)動(dòng)畫(huà)，讓場(chǎng)景在掃描出來(lái)后呈現(xiàn)動(dòng)態(tài)效果。PART04AR手冊(cè)第四頁(yè)虛擬立牌2AR手冊(cè)第四頁(yè)虛擬立牌2在第四頁(yè)的圖片識(shí)別目標(biāo)下新建一個(gè)畫(huà)布，命名為虛擬立牌2。將新建的畫(huà)布的渲染模式由屏幕空間-覆蓋改為世界空間，并調(diào)節(jié)畫(huà)布的位置和大小。虛擬立牌2畫(huà)布里新建一個(gè)UI圖像，源圖像選擇虛擬立牌2圖片素材，并調(diào)節(jié)虛擬立牌2在畫(huà)布中的大小和位置。AR手冊(cè)第四頁(yè)虛擬立牌2新建一個(gè)UI圖像，命名為廣場(chǎng)。源圖像選擇虛擬立牌2廣場(chǎng)圖片素材，并調(diào)節(jié)廣場(chǎng)在畫(huà)布中的大小和位置。AR手冊(cè)第四頁(yè)虛擬立牌2加入樹(shù)木、花草、牌匾、鴿子等其他元素讓虛擬立牌2場(chǎng)景更加豐富。AR手冊(cè)第四頁(yè)虛擬立牌2加入雪花特效、噴泉特效、給鴿子制作動(dòng)畫(huà)，讓場(chǎng)景在掃描出來(lái)后呈現(xiàn)動(dòng)態(tài)效果。PART05案例發(fā)布案例發(fā)布在菜單欄中點(diǎn)擊File-BuildSettings，點(diǎn)擊PlayerSettings在Android端勾選VuforiaAugmentedRealit,最后點(diǎn)擊Build即可導(dǎo)出app，如圖所示。案例發(fā)布效果圖VR古鎮(zhèn)案例功能實(shí)現(xiàn)——VR古鎮(zhèn)目錄content01模型素材02環(huán)境配置03場(chǎng)景搭建04功能實(shí)現(xiàn)04打包發(fā)布PART01模型素材資源文件本案例的視頻教程可通過(guò)掃描本章二維碼獲取，開(kāi)發(fā)用到的所有素材，均可從本書(shū)配套的資源下載PART02環(huán)境配置SteamVR的導(dǎo)入在Unity資源文件夾中新建Images文件夾，將素材文件的Images文件夾中的所有圖片導(dǎo)入文件夾，如圖2-8所示。SteamVR的導(dǎo)入新建項(xiàng)目，在Window選擇欄下打開(kāi)AssetStore界面，在界面中搜索SteamVR進(jìn)行添加導(dǎo)入.VRTK的導(dǎo)入點(diǎn)擊Edit（編輯面板），打開(kāi)ProjectSetting(項(xiàng)目設(shè)置),在彈出的項(xiàng)目設(shè)置面板中選擇最后一欄，進(jìn)行XR插件下載，等待XR插件下載完成。VRTK的導(dǎo)入等待XR插件下載完成后，在項(xiàng)目設(shè)置面板中選擇Player，勾選DeprecatedSettings后點(diǎn)擊加號(hào)，在出現(xiàn)的欄目中添加OpenVR即可。VRTK的導(dǎo)入在資源管理器中右鍵打開(kāi)項(xiàng)目文件夾，打開(kāi)里面的Packages文件夾，發(fā)現(xiàn)里面有兩個(gè)文件。在配套資源文件夾中拷貝manifest.json復(fù)制進(jìn)當(dāng)前文件夾中，替換原有的文件即可返回Unity等待插件的安裝。PART03場(chǎng)景搭建場(chǎng)景導(dǎo)入在資源文件夾Assets中新建Scenes文件夾，搜索StartScene場(chǎng)景打開(kāi)，并將此場(chǎng)景導(dǎo)入新建的Scenes文件夾中。再搜索MainScene場(chǎng)景，也將其導(dǎo)入Scenes文件夾中。找到Player并導(dǎo)入場(chǎng)景中，Player即玩家自身角色。文件導(dǎo)入在Unity資源文件夾中新建Images文件夾，將素材文件的Images文件夾中的所有圖片導(dǎo)入文件夾。格式轉(zhuǎn)化選擇所有圖片，將圖片格式轉(zhuǎn)化為2DUI格式，方便后續(xù)圖片的賦予。交互功能SteamVR\InteractionSystem\Teleport\Teleporting插件拖入到場(chǎng)景中，再次運(yùn)行，推動(dòng)方向搖桿或者按住圓盤便可射出拋物線。在Scene界面下鼠標(biāo)點(diǎn)擊地面進(jìn)行選擇，在右側(cè)Inspector下搜索TeleportArea函數(shù)并添加，再次點(diǎn)擊運(yùn)行便可發(fā)現(xiàn)拋物線可以與地面產(chǎn)生交互，人物跟隨移動(dòng)交互功能點(diǎn)擊材質(zhì)找到地面材質(zhì)所在的位置，找到并點(diǎn)擊場(chǎng)景文件夾中的Teleporting插件，導(dǎo)致更換材質(zhì)的原因是Teleport函數(shù)中3個(gè)以Area開(kāi)頭的參數(shù)，將之前地面的材質(zhì)分別更換里面的材質(zhì)，再次添加TeleportArea函數(shù)，便發(fā)現(xiàn)材質(zhì)不會(huì)發(fā)生變化。交互功能此時(shí)可以發(fā)現(xiàn)上圖中Game視角下的橋面的材質(zhì)消失了，解決方法與前面相似，添加TeleportArea函數(shù)，取消勾選TeleportArea函數(shù)中的MarkerActive即可，之前地面添加的TeleportArea函數(shù)也進(jìn)行取消。交互功能在MainScene中，將場(chǎng)景中的Player位置進(jìn)行修改至走廊的位置。交互功能創(chuàng)建Canvas，重命名為Passage，在Passage中在創(chuàng)建Image，將圖片的參數(shù)及位置進(jìn)行修改，使圖片位于走廊的墻上。將Images文件夾中的“南潯古鎮(zhèn)1”圖片賦予Image。交互功能新建一個(gè)Canvas，將名字改為Passage，將Prefabs文件夾中的Button預(yù)制體拖入其中，修改名字為Image1此時(shí)位置是錯(cuò)誤的，需要修改參數(shù)，將Image1移至第一張圖片處。修改Image1中的Image的圖片形式，對(duì)應(yīng)第一張圖片的名字——南潯古鎮(zhèn)1。交互功能古鎮(zhèn)的圖片已經(jīng)擺放完成了，接下來(lái)制作關(guān)于古鎮(zhèn)的介紹。首先制作介紹背景圖片，選擇Image創(chuàng)建新的Image重命名為UI，將Assets中的Images文件夾選擇“簡(jiǎn)介背景”圖片賦予UI，交互功能首先選擇UI圖片，右鍵在UI欄下找到Text并創(chuàng)建。此時(shí)發(fā)現(xiàn)在UI圖片中并沒(méi)有出現(xiàn)文本，這是因?yàn)楦讣?jí)UI圖片修改參數(shù)的原因而導(dǎo)致的。在配套資源文件夾中找到文本“簡(jiǎn)介內(nèi)容”，打開(kāi)發(fā)現(xiàn)里面有6段文字，分別對(duì)應(yīng)后續(xù)的6張圖片。先復(fù)制第一段文字到剛剛創(chuàng)建的文本中，將字體修改為導(dǎo)入的字體“STXINGKA”。最后是參數(shù)的修改，交互功能Scripts文件夾中創(chuàng)建新的腳本，命名為ImageClick后打開(kāi)，引用UI命名空間，因?yàn)榻换スδ苄枰玫絆nClick事件觸發(fā)檢測(cè)，所以需要繼承UIElement代碼，這時(shí)候需要打開(kāi)UIElement代碼，復(fù)制其命名空間：Valve.VR.InteractionSystem.UIElement，將原來(lái)的命名空間替換掉。具體代碼如下所示：交互功能所以選擇圖片Image1，在右邊移除掉OnClick監(jiān)聽(tīng)事件和UIElement代碼。將剛剛創(chuàng)建的代碼ImageClick賦給圖片Image1，然后將圖片中的UI賦予到ImageClick代碼中的information即可。進(jìn)入場(chǎng)景進(jìn)行測(cè)試，走到圖片旁邊，用手柄觸碰圖片并按下扳機(jī)鍵時(shí)發(fā)現(xiàn)古鎮(zhèn)簡(jiǎn)介可以正常出現(xiàn)，再次按下扳機(jī)鍵時(shí)，簡(jiǎn)介又隱藏了。PART04功能實(shí)現(xiàn)主頁(yè)制作選擇創(chuàng)建的Canvas右鍵選擇UI中的Image進(jìn)行創(chuàng)建，修改圖片的參數(shù)，找到剛剛添加的Images文件夾，將開(kāi)始場(chǎng)景的背景圖片賦予，主頁(yè)制作隱藏剛剛新建的開(kāi)始場(chǎng)景背景圖片，選擇創(chuàng)建的Canvas右鍵選擇UI中的Button進(jìn)行創(chuàng)建，選擇Button中的Text，修改文本為StartGame。主頁(yè)制作參數(shù)設(shè)置完后，為Button添加Interactable，UIElement代碼，添加BoxCollider（盒子碰撞器）后續(xù)手柄才可與按鈕進(jìn)行碰撞檢測(cè)，將BoxCollider中的參數(shù)進(jìn)行修改BoxCollider參數(shù)設(shè)置主頁(yè)制作修