虚拟现实的UI制作和交互

2021-01-04 15:24发布

无论是游戏,还是虚拟现实等,都不可能缺少UI界面的制作,对于界面我们可以分为两种UI界面,一种是能够跟随VR头盔移动的UI,另一种为不跟随头盔移动的UI,也就是将UI看作三给空间中的游戏对象。

UGUI的Canvas渲染模式: 
1

第一种:Screen Space - overlay 
此模式不需要UI摄像机,UI将永远出现在所以摄像机的最前面,如果想在UI前面显示一个模型或者NPC等游戏对象就不行了,所以VR的UI不适用这种渲染模式

第二种:Screen Space -Camera 
从模式是比较适合VR开发的,它需要提供一个摄像机用于渲染UI界面,这种形式我们就可以在UI界面与摄像机之间放置一些游戏对象,可以通过设定渲染摄像机,使用UI跟着头盔进行移动。(你怎样转动UI都会一直出现在视野前方)

第三种:Screen Space - Space 
把UI当做3D物体一样的,完全是个3DUI,整个Canvas画布被认定为是一个3D空间中的游戏对象,与创建的其他游戏物体一样,即此模式下的UI不会跟着头盔移动


Unity中UI的交互: 
在VR 中的交互通常情况下,会通过手柄发出一条射线,用线来操作UI界面,,,

给玩家看的线条的绘制:有下面几种方式

  • 利用LineReander绘制

  • 3DUI实现

  • 利用Cube缩放

  • GL库绘制


UI的交互方式:通过手柄发出射线,当射线碰撞到UI元素后,结合手柄的操作,调用相应的方法,,,

using System.Collections;

using System.Collections.Generic;

using UnityEngine;


//代码挂载到手柄上

public class MyLineTest : MonoBehaviour {


    private LineRenderer line;                        //要画出来的线

    private Vector3[] posArray = new Vector3[2];      //射线的起始点


    private Ray ray;                                  //真正检测用的射线

    private RaycastHit rayHit;                        //获取射线碰撞信息


    private SteamVR_TrackedObject steamvrObj;         //获取VR组件引用

    private SteamVR_Controller.Device device;         //用来接收设备索引


    void Start () {

        //获取射线组件

        line = GetComponent<LineRenderer>();

        if (line == null)

        {   //没有则添加

            line = this.gameObject.AddComponent<LineRenderer>();

        }

        //设置画出来线的宽度,,(使用户看起来想红外线一样)

        line.startWidth = 0.002f;

        line.endWidth = 0.002f;


        //获取组件上的设备索引,,找到当前连接的设备

        steamvrObj = this.GetComponent<SteamVR_TrackedObject>();

        device = SteamVR_Controller.Input((int)steamvrObj.index);


    }


    // Update is called once per frame

    void Update () {


        //设置起点和终点,起点是手柄的位置,终点是手柄前面100个单位的位置

        posArray[0] = this.transform.position;

        posArray[1] = this.transform.position.normalized * 100;


        //画线使 用户看到

        line.SetPositions(posArray);


        //创建出射线

        ray = new Ray(posArray[0], posArray[1]);

        //检测碰撞

        if (Physics.Raycast(ray, out rayHit, 100))

        {

            //按下Trigger键

            if (device.GetPressDown(SteamVR_Controller.ButtonMask.Trigger))

            {

                //碰撞到Cube

                if(rayHit.collider.name == "Cube")

                {

                    Debug.Log("射线碰撞到了Cube");  //这样就可以做交互了

                }

            }

        }

    }

}




作者:Czhenya

链接:https://czhenya.blog.csdn.net/article/details/78482914

来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。