Cardboard实现VR的目选效果

一、首先是下载unity SDK，可以进入Google Cardboard官方网站的开发者指南页面查找下载：https://developers.google.com/cardboard/unity/download

下载后导入到unity中可以查看官方的demo，如下图：

由于Cardboard没什么按键，所以选择之类的事情只能用目选来进行，那怎么实现目选呢？可以想象一下，目选无非就是两部分，a：旋转读条；b、确认选择。

但是有一点，两部分分开来做那很简单啦，但是怎么放到一起呢？

首先，我们先来看看该部分原本给你提供的代码：Teleport.cs

// Copyright 2014 Google Inc. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     [url=http://www.apache.org/licenses/LICENSE-2.0]http://www.apache.org/licenses/LICENSE-2.0[/url]
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
 
using UnityEngine;
using System.Collections;
 
[RequireComponent(typeof(Collider))]
public class Teleport : MonoBehaviour, ICardboardGazeResponder {
  private Vector3 startingPosition;
 
  void Start() {
    startingPosition = transform.localPosition;
    SetGazedAt(false);
  }
 
  void LateUpdate() {
    Cardboard.SDK.UpdateState();
    if (Cardboard.SDK.BackButtonPressed) {
      Application.Quit();
    }
  }
 
  public void SetGazedAt(bool gazedAt) {
    GetComponent<Renderer>().material.color = gazedAt ? Color.green : Color.red;
  }
 
  public void Reset() {
    transform.localPosition = startingPosition;
  }
 
  public void ToggleVRMode() {
    Cardboard.SDK.VRModeEnabled = !Cardboard.SDK.VRModeEnabled;
  }
 
  public void ToggleDistortionCorrection() {
    switch(Cardboard.SDK.DistortionCorrection) {
    case Cardboard.DistortionCorrectionMethod.Unity:
      Cardboard.SDK.DistortionCorrection = Cardboard.DistortionCorrectionMethod.Native;
      break;
    case Cardboard.DistortionCorrectionMethod.Native:
      Cardboard.SDK.DistortionCorrection = Cardboard.DistortionCorrectionMethod.None;
      break;
    case Cardboard.DistortionCorrectionMethod.None:
    default:
      Cardboard.SDK.DistortionCorrection = Cardboard.DistortionCorrectionMethod.Unity;
      break;
    }
  }
 
  public void ToggleDirectRender() {
    Cardboard.Controller.directRender = !Cardboard.Controller.directRender;
  }
 
  public void TeleportRandomly() {
    Vector3 direction = Random.onUnitSphere;
    direction.y = Mathf.Clamp(direction.y, 0.5f, 1f);
    float distance = 2 * Random.value + 1.5f;
    transform.localPosition = direction * distance;
  }
 
  #region ICardboardGazeResponder implementation
 
  /// Called when the user is looking on a GameObject with this script,
  /// as long as it is set to an appropriate layer (see CardboardGaze).
  public void OnGazeEnter() {
    SetGazedAt(true);
  }
 
  /// Called when the user stops looking on the GameObject, after OnGazeEnter
  /// was already called.
  public void OnGazeExit() {
    SetGazedAt(false);
  }
 
  // Called when the Cardboard trigger is used, between OnGazeEnter
  /// and OnGazeExit.
  public void OnGazeTrigger() {
    TeleportRandomly();
  }
 
  #endregion
}

其实大部分代码我都从头到尾稍稍读了一遍，其实接口已经清楚地给我们放出来了，就是这块代码。代码中有一个SetGazedAt的方法，该方法就是当你水平目视前方的物体算作你选中的物体，官方demo里是当你目视一个cube时把该cube的颜色由红色换为绿色。

二、好的，突破口已经找到了，我们来看看怎么实现旋转读条的效果：

其实很简单，研究过UI的人应该都明白，就是一个很简单的遮罩。

放一个画布canvas，然后创建一个image命名为imageBg作为背景，再创建一个image命名为imageFill作为内容，然后复制一个imageFill，选color属性调成半透明，颜色改成灰色，image Type选择Filled，大小都调合适了。然后就做成了，如图：

三、把Teleport.cs拖到imageBg上，我们再来看刚刚的代码部分，按常理来说，点击选中面板中可以直接添加一个button属性就可以实现，但是我们现在要的是目选，所以就要自己来判断了，其实也不难，也就是一个触发器的问题。

public void SetGazedAt(bool gazedAt) {
                isStartTime = gazedAt ? true : false;
        }

上面这个函数前面加上public

在imageBg下添加一个Event Trigger，添加Pointer Enter和Pointer Exit，分别对应SetGazeAt方法的两个值

在初始化里获取imageFill的image组件，设置fillAmount的初始值为零。

在update里利用计时器来控制旋转读条的快慢，并在读完时刻判断目选的选中状态。

修改后的全部代码如下：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
 
public class TeleportGUI : MonoBehaviour, ICardboardGazeResponder {
 
        public float coldTime = 1;
        private Image imagefill;
        private float timer = 0;
        private bool isStartTime = false;
        private double minNum = 0.01;
        private double maxNum = 0.02;
        private bool isNext = false;
 
        public Text index;
        int IndexInt = 0;
        string IndexStr = "";
 
        // Use this for initialization
        void Start () {
 
                imagefill = transform.Find ("Imagefill").GetComponent<Image> ();
                imagefill.fillAmount = 0;
 
                SetGazedAt (false);
 
        }
 
        void LateUpdate() {
                Cardboard.SDK.UpdateState();
                if (Cardboard.SDK.BackButtonPressed) {
                        Application.Quit();
                }
        }
 
        public void SetGazedAt(bool gazedAt) {
 
                isStartTime = gazedAt ? true : false;
 
        }
 
        // Update is called once per frame
        void Update () {
                 
                if (isStartTime) {
                        timer += Time.deltaTime;
                        imagefill.fillAmount = (coldTime - timer) / coldTime;//从1到0减小
                        if (timer >= coldTime) {
                                imagefill.fillAmount = 0;
                                timer = 0;
                                isStartTime = false;
                        }
 
                }
                if(!isStartTime) {
                         
                        timer = 0;
                        imagefill.fillAmount = 0;
                }
 
                if (imagefill.fillAmount < maxNum && imagefill.fillAmount >minNum) {
 
                        isNext = true;
 
                }
 
                if (isNext) {
 
                        ChooseManageScript.Instance.A_Btn ();
 
                        index = GameObject.Find("IndexBackground").transform.Find ("Index").GetComponent<Text> ();
                        IndexInt = int.Parse(index.text);
                        IndexInt += 1;
                        IndexStr = IndexInt.ToString();
                        index.text = IndexStr;
                        isNext = false;
                }
 
        }
 
        public void TeleportRandomly() {
                Vector3 direction = Random.onUnitSphere;
                direction.y = Mathf.Clamp(direction.y, 0.5f, 1f);
                float distance = 2 * Random.value + 1.5f;
                transform.localPosition = direction * distance;
        }
 
        #region ICardboardGazeResponder implementation
 
        /// Called when the user is looking on a GameObject with this script,
        /// as long as it is set to an appropriate layer (see CardboardGaze).
        public void OnGazeEnter() {
                SetGazedAt(true);
        }
 
        /// Called when the user stops looking on the GameObject, after OnGazeEnter
        /// was already called.
        public void OnGazeExit() {
                SetGazedAt(false);
        }
 
        // Called when the Cardboard trigger is used, between OnGazeEnter
        /// and OnGazeExit.
        public void OnGazeTrigger() {
                TeleportRandomly();
        }
 
        #endregion
 
}