CardBoard中UGUI的使用

作者: Levi_Wan | 来源:发表于2016-12-28 22:57 被阅读188次

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

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

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png

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

Paste_Image.png

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

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

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，并为它绑定相应的事件。