CardBoard中UGUI的使用

使用cardboard实现简单的场景漫游。

首先我们需要为我们的场景导入cardboard的SDK和Demo包（Demo包中有做好的Camera预设）可以仿造这个预设学习VRCamera的制作。

Paste_Image.png

Paste_Image.png

  可以先打开里面已经做好的Demo场景看看效果。

Paste_Image.png

Paste_Image.png

通过阅读Google的用户帮助文档，我们可以知道按住Alt+鼠标可以实现模拟我们头部的转动。按住Ctrl+鼠标可以实现模拟脖子的左右晃动。
  当我们把屏幕的中心点（Gaze）聚焦到Cube上时，Cube的颜色发生了变化。

Paste_Image.png

  我们可以发现，在我们场景中存在着两张Canvas，一个world space的3D Canvas（用于用户交互使用），一个Overlay的覆盖在摄像机上的Canvas（用于显示FPS）

Paste_Image.png

• 交互的Canvas

  
  
  

  Paste_Image.png

• 显示FPS的Canvas

  
  
  

  Paste_Image.png

  那这些Canvas是怎么通过UGUI制作的呢？ 又是怎么实现与我们进行交互的呢？

• 首先为什么凝视到Cube的时候会变色？我们从Cube身上找原因

Paste_Image.png

Paste_Image.png

• 可以看见Cube身上多追加了一个EventTrigger，并绑定了Enter，Exit，Click三种事件，由于它身上有Trgger，那我们的Main Camera“头”上，肯定也有射线的发射

Paste_Image.png

• 这样就找到了，VR中与里面物体交互的原因。我们打开EventTrigger上的绑定的脚本。（Cube凝视变色的操作都是基于这三个方法控制的，所以我们只需要关心，如何利用CardBoard SDK实现也物体交互就行）

Paste_Image.png

• 由于UGUI中的交互是基于射线存在的（凝视其实也是一条Ray Gaze的射线），我们现在试着取消Button上的Raycast Target（对应Button下的Text也取消），我们可以发现现在点击Reset按钮就没有任何交互了。

Paste_Image.png

Paste_Image.png

我们现在来模拟上面做一个自己的场景。

• 首先打开自己的场景：

Paste_Image.png

Paste_Image.png

• 将这个摄像机VR化，为它添加stereoController脚本。

Paste_Image.png

• 创建一个Canvas，由于需要把它做成3D的，我们需要把它的Render Mode设置为World Space。并定位到相应的脚下。

Paste_Image.png

• 此时我们发现我们的没有Gaze点。这时我们将CardBoard里的预设拖拽到我们的Main Camera下

Paste_Image.png

• 此时我们将凝视点移到到Button上并点击鼠标左键会发现毫无效果。是因为我们的EventSystem并没有Gaze的事件触发。这时我们需要为我们的EventSystem添加GazeInputModule的脚本，由于Standalone的优先级高于GazeInputModule的这时，我们需要将之间EventSystem所监视的事件禁用。

Paste_Image.png

• 接着我们移动上去就能和Demo里一样，需要触发相应的事件，就在Button的Onclick事件里绑定相应的事件。

  
  
  

  Paste_Image.png

• 完成了Demo里的Button，接下来我们需要对物体进行凝视的控制。首先我们的之前提到了凝视了是基于射线Gaze的。

  • Ray Gaze [read only] 在确保变换是最新的之后，返回基于头的位置和直视方向的光线。在场景中使用光线投射（注* Physics.Raycast 光线投射）来确定该用户正在查看的对象。

• 所以首先我们要给我们的Main Camera添加Physics Raycast组件。

  
  
  

  Paste_Image.png

• 接着我们需要对我们想要被检测到的物体加以控制，我们对箱子的上半部分添加EventTrgger，并为它绑定相应的事件。

Paste_Image.png

• 我们使这个箱子进行旋转（产生时它感觉点击被打开的交互行为）
• 代码：（这里使用四元数转成欧拉角来进行旋转）

Paste_Image.png

• 我们凝视到箱子时，凝视由于检测到EventTrgger，会发生到相应的改变。

Paste_Image.png

• 我们点击鼠标左键，箱子会打开！（完成交互）

Paste_Image.png