谷歌VRAPP实战UNITY与CARDBOARDAPP基础实践(三)

1、谷歌VR APP实战！UNITY与CARDBOARD APP基础实践（三）今天的VR实战是腾讯ISUX高级交互家设计师C7210亲自写的，教你借用免费的Unity资源，搭起3D场景，放上3D对象，并使用Google提供的SDK组件模拟VR视野。这个教程最好玩的地方是，如果有兴趣打包成App放到iPhone当中，便可以直接塞到Cardboard里面以真实VR的方式进行体验了我们接下来将要一起捣鼓的东西，简单描述一下大约就是借来一些免费的Unity资源，搭起3D场景，在里面放上一两个没有任何意义的3D对象，使用Google提供的SDK组件模拟VR视野，当视线聚焦在3D对象上时，VR准星会发生形变，

2、同时3D对象会改变外观，暗示互动性；而通过鼠标模拟Cardboard按钮点击事件还可以使3D对象产生位移。大致就是这样。如果有兴趣打包成app放到iPhone当中，便可以直接塞到Cardboard里面以真实VR的方式进行体验了。提炼一下具体的的实践要点，包包括：向Unity项项目中导入GGooglee VRUUnity SDK。在Unity Assett Storre中浏览并并下载免费资资源包。调用Googlle VR相相关组件，构构建VR模式。向场景(Sceene)中添添加交互对象象。编写代码，制定定凝视交互的的规则。构建事件系统及及触发规则。通过Xcodee将VR appp部署到iPhho

3、ne当中中。需要准备的原料料Unity：下下载并安装最最新的免费个个人版本。Google VR Unnity SSDK：下载载并解压，其其中包含了SSDK以及Googgle官方提提供范例项目目。Cardboaard：Googlle Carrdboarrd或其他同同类设备均可可。Xcode：用用于将最终打打包的appp部署到iPhhone当中中。体量庞大大，如果不准准备实际部署署也可忽略。布置3D环境与与交互组件打开Unityy，新建3D项目：点击菜单栏中的的Assetts IImportt Packkage Custtom Paackagee，选择之前解解压缩的Gooogle VVR Unii

4、ty SDDK当中的GooogleVRRForUnnity.uunityppackagge：在接下来弹出的的Imporrt Uniity Paackagee对话框中，确确保所有资源源都有被勾选选，然后点击击Imporrt按钮：导入完成后，PProjecct面板当中中的资源路径径看上去应该该是这样的：Google VR Unnity SSDK布置完完毕，下面我我们来找一些些现成的环境境素材。点击击Assett Storre面板，在在内嵌页面的右侧侧导航当中找找到3D MModelss Ennviromments，接接下来可以筛筛选出所有的的免费模型，找找到自己喜欢欢的，确认资资源中包含.unit

5、yy场景文件，例例如下图当中中我所选用的的Moon Landsscape资资源包所提供供的Demoo Scenne(接下来来所涉及到的的相关文件操操作均以Mooon Laandscaape为例)：建议在这里挂好好VPN，然后后点击内嵌页页中的Downlload或Imporrt(如果之之前已经下载载过)按钮。下载载完成后，在在弹出的Immport Unityy Packkage对话话框中，确保保所有资源都都有被勾选，然然后点击Immport按按钮：导入完成后，在在Projeect面板的的Assetts管理器当当中找到刚刚刚下载的资源源包里的deemo场景文文件：双击打开该文件件，Scenne面板

6、当中中会出现deemo场景，我我们接下来就就在这里工作作：想要置身于3DD环境当中以以第一人称视视角观察世界界，我们需要要“眼睛”，即Unitty提供的Cammera控件件。新建的空空白场景当中中不包含任何何Camerra控件，我我们需要自己己来添加。点点击菜单栏当当中的Gamme Objject Cameera：确保新添加的CCameraa控件被选中中(如果没有，可可以在左侧HHierarrchy面板板当中点选)，在右侧Innspecttor面板当当中点击Taag下拉菜单单，选择“MainCCameraa”：由于Moon Landsscape场场景当中的地地形会高出水水平面，所以以我们需要调

7、调整Cameera的位置置，使其位于于地面以上。在在“Postiion”当中，为“YY”输入恰当当的数值，譬譬如“25”(或任何能够够确保Cammera垂直直方向的位置置略微高出地地面的数值)：同样在Insppectorr面板当中，点点击底部的AAdd Coomponeent按钮，输输入关键词“PPhysiccs”，点选选“Physsics RRaycasster”(使Camerra视线可以以与3D对象进行行互动)：一番设置之后，Camera控件的Inspector面板看上去应该是这样的：接下来我们需要要添加Gooogle VVR相关组件件。在Prooject面面板的资源列列表中找到AAsse

8、tss GooogleVVR PPrefabbs文件夹，将将其中的GvvrViewwerMaiin拖放到左左侧的Hieerarchhy面板中(这一步骤相相当于为Unnity项目目添加Gooogle VVR模式，包包括视觉样式式及互动机制制等等)：确保GvrViiewerMMain被选选中，在右侧侧Inspeector面面板当中调整整“Screeen Siize”和“Viewwer Tyype”的值值，选择需要要部署的手机机型号及Caardboaard款式：接下来我们要向向Camerra视野当中中添加准星，用用于接下来的的凝视交互。在在Projeect面板的的资源列表中中找到Asssets Go

9、oggleVR Preefabs UI文文件夹，将其其中的GvrrReticcle拖放到到左侧Hieerarchhy面板中的的Camerra控件上，使使其成为Caamera的的子元素：OK我们来预览览一下当前场场景的实际效效果。点击顶顶部的Plaay按钮，界界面会自动切切换到Gamme模式。夜夜空、月球表表面、Carrdboarrd分屏、准准星，还不坏坏(此时可以按按住键盘上的的alt或contrrol键，同同时移动鼠标标，测试一下下主视角的移移动方式)：再次点击顶部的的Play按钮钮，退出Gaame模式。接接下来我们要要向场景当中中添加互动对对象。立方体体(Cubee)是Unityy当中最基

10、础最简单单的3D对象 点击菜菜单栏当中的的Game Objecct 33D Objject Cubee，一个立方方体便会被添添加到场景当当中：我们需要将立方方体置于Caamera默默认视线的前前方(选中Cameera控件即即可查看其视视野方向及范范围，便于确确定“前方”的具体位置置)。此外，冷冷寂的月球环环境让我想到到了20001太空漫游游当中的一一些情景(斯坦利库布里克指指导，19668年的鸿篇篇巨制，有谁谁看过没？)，于是我希希望将立方体体修改为电影影中的黑石碑碑样式。选中中Cube，在在右侧Insspectoor面板当中中调整“Poositioon”和“Scalle”的值：调整之后Cub

11、be的形状与与位置大致如如下图所示：在这个简单的范范例当中，33D环境及交交互组件就是是这些。下面面我们要做一一些代码工作作了。编写代码，设定定交互规则在Assetss面板当中点点击鼠标右键键，选择Crreate C# Scrippt，将新添添加的代码文文件命名为“IInteraactionns”：双击该文件，UUnity会会自动加载MMonoDeevelopp代码编辑器器。清除掉文文件当中自带带的全部内容容，替换为以以下代码： 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(); 代码本身并不复复杂，简单解解释一下逻辑辑。我们在IInteraactionns类当中总总共声明了66个函数：SetGazeeAt()：根据传传入的条件，判判断交互对象象(譬如立方体体)应该呈现出出红色还是黑黑色外观。MoveUp()：将交互互对象沿Y轴向上移动动一个单位的的距离。Start()：调用特定定的功能进行行初始化设定定(SetGaazeAt，参参数为“faalse”)。OnGazeEEnter()：当准星星聚焦于交互互对象时，调调用特

14、定的功功能(SetGaazeAt，参参数为“trrue”)。OnGazeEExit()：当准星不不再聚焦于交交互对象时，调调用特定的功功能(SetGaazeAt，参参数为“faalse”)。OnGazeTTriggeer()：准星聚聚焦于交互对对象时，用户户按压Carrdboarrd上的按钮钮，则调用特特定的功能(MoveUUp)。构建事件系统代码搞定，接下下来需要将事事件处理系统统添加到项目目当中，使交交互规则可以以在视线与交交互对象之间间运作起来。点点击菜单栏当当中的Gamme Objject UI Evennt Sysstem，将将其添加到左左侧的Hieerarchhy面板中：确保Eve

15、ntt Systtem处于选选中态，在右右侧Insppectorr面板当中点点击底部的AAdd Coomponeent按钮，输输入关键词“GGaze”，点点选“GazeIInputMModulee”，向事件系统中中添加基于凝凝视的交互模模组：我们需要提升凝凝视交互规则则的优先级，使使其不会被默默认规则覆盖盖，否则在实实际注视Cuube对象时时，准星的行行为会有异常常。点击“GGaze IInput Modulle”标题右右侧的齿轮图图标，在下拉拉列表中选择择“Movee Up”，使使“Gazee Inpuut Moddule”整整体移至“SStandaalone Inputt Moduule”

16、上方方：我们还需要使CCube能够够响应代码定定义的交互事事件规则。在在左侧的Hiierarcchy面板中中选中Cubbe对象，在在右侧Insspectoor面板当中中点击底部的的Add CComponnent按钮钮，找到“IInteraactionns”，将代代码添加到CCube对象象当中：再次点击Addd Compponentt按钮，输入入“Evennt”，点选选“Evennt Triigger”：接下来我们需要要将特定的交交互动作与代代码中设定的的规则关联起起来。点击AAdd Neew Eveent Tyype按钮，选选择“PointterEntter”：点击“Nonee (Objjec

17、t)”右侧的按钮，在弹出的列表当中选择“Cube”自身：然后在右侧的FFunctiion列表中中选择Intteracttions OnGGazeEnnter()，也就是我我们之前在IInteraactionns代码文件件当中定义的的OnGazzeEnteer函数：这一系列设置相相当于告诉系系统，当准星星移动到Cuube对象上上时，执行OOnGazeeEnterr函数当中定定义的行为，即即通过SettGazeAAt()将Cube的外外观设置为红红色。同理，我们还需需要告诉系统统当准星离开开Cube对象象时，或是在在Cube对象象上按压Caardboaard按钮时时需要执行怎怎样的行为。点击“Ev

18、ennt Triigger”底部的Add New Event Type按钮，选择“PointerExit”：确保事件对象为为“Cubee”，然后在在右侧的Fuunctioon列表中选选择Inteeractiions OnGaazeExiit()：同理，再次点击击“Evennt Triigger”底部的Add New Event Type按钮，选择“PointerClick”：确保事件对象为为“Cubee”，然后在在右侧的Fuunctioon列表中选选择Inteeractiions OnGaazeTriigger()：预览至此，我们的范范例已经基本本完工，不如如预览一下自自己的工作成成果。点击顶

19、顶部的Plaay按钮，进进入Gamee模式：按住alt键，同同时移动鼠标标，使准星聚聚焦于黑石碑碑，会发现石石碑变成了红红色，准星本本身也变成了了环状(提示所注视视的对象具有有交互特性)：点按鼠标，石碑碑会一点点升升起：说无聊也是够无无聊的，但事事已至此，完完全可以给自自己一点掌声声，因为我们们学会了一些些很基础同时也也很重要的东东西。你还可可以继续尝试试做些额外的的工作，譬如如复制几个石石碑，排成一一行，看上去去会很酷，同时也也可以帮你了了解在Uniity当中操操作3D对象的基基本方法。如如果无需担心心设备的性能能问题，又足足够无聊，复复制出几万个个黑石碑，混混乱的堆放起起来，像22010太

20、空空漫游(2001太空空漫游续作作)那样将整个个星球完全吞吞噬掉也无妨妨。打包app，在在iPhonne上运行接下来的步骤属属于选做作业业，如果手头头有Carddboardd，那么实际际体验一下终终归会更有成成就感一些。具具体的实现流流程和之前“UUnity与与Cardbboard app基础础实践(1)”当中介绍绍的相同。点击菜单栏中的的File Buiild Seettinggs：在Build Settiings窗口口中，选择PPlatfoorms列表表里的“iOS”，然后点击击列表下方的的Switcch Plaatformm按钮：等待素材导入完完成，然后点点击Builld Setttingss窗口中的Pllayer Settiings按钮钮，此时右侧侧的Insppectorr面板当中会会出现PlaayerSeettinggs选项区：找到“Setttings for iiOS”部分，点击击其中的“RResoluution and PPresenntatioon”使其展展开，将“DDefaullt Oriientattion”设设置为“Auuto Rootatioon”，然后后取消勾选“AAlloweed Oriientattions