Unity 进阶 之 AR/VR 3D场景中Laser镭射线拖拽UI实现问题的简单整理

目录

Unity 进阶 之 AR/VR 3D场景中Laser镭射线拖拽UI实现问题的简单整理

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、简单实现步骤

常规拖拽

常规拖拽在3D空间拖拽位置跳动问题

解决常规拖拽在3D空间拖拽位置跳动问题的简单方法

六、关键代码

一、简单介绍

Unity中的一些知识点整理。

本节简单介绍在Unity开发中的，在AR/VR 开发中，有时候需要在 3D 空间进行 UI 元素的拖拽功能，或者即把UI元素从一个面板位置拖拽到另一个面板位置，有时候Laser 镭射线拖拽 UI 元素，不小心拖出屏幕的时候，常规的拖拽操作就会出现位置错误，如果您也遇到了类似情况，这里提供一个简单思路方法，提供参考，如果你有新的方式也可以留言，多谢。

二、实现原理

1、常规的 UI 拖拽功能，一般使用 RectTransformUtility.ScreenPointToWorldPointInRectangle 或者 RectTransformUtility.ScreenPointToLocalPointInRectangle 进行位置的计算

1、RectTransformUtility.ScreenPointToWorldPointInRectangle(this.gameObject.GetComponent(), eventData.position, eventData.enterEventCamera, out pos);2、RectTransformUtility.ScreenPointToLocalPointInRectangle(m_canvsGo.GetComponent(), eventData.position, eventData.enterEventCamera, out pos);

2、3D 空间场景（AR/VR）中的 UI 拖拽，一般常规功能也可以适用，这里介绍使用 Laser 镭射线交互得到的 eventData.position 转为世界坐标的位置赋值给 UI 使用，来实现 3D 空间场景（AR/VR）中的 UI 拖拽

        Vector3 pos = eventData.position;pos.z = 1080;this.transform.position = Camera.main.ScreenToWorldPoint(pos) + m_OffsetPos;

三、注意事项

1、拖拽 UI 的 时候，为了避免移动的突兀，在开始移动的时候注意添加一个移动偏差值，在正式移动的时候做位置赋值的时候注意添加上偏移量，其中 pos.z 的数值是， Canvas 位置 z 相对Camera 位置的 z （默认camera 位置 Vector.zero 方向朝前z,Canvas 在 z 向位置）

1、移动开始时计算出移动偏差值Vector3 pos = eventData.position;pos.z = 1080;m_OffsetPos = this.transform.position - Camera.main.ScreenToWorldPoint(pos);
2、移动的时候添加上移动的偏差值Vector3 pos = eventData.position;pos.z = 1080;this.transform.position = Camera.main.ScreenToWorldPoint(pos) + m_OffsetPos;

四、效果预览

五、简单实现步骤

常规拖拽

1、打开 Unity 创建场景，在 场景中添加移动的 UI -Image

2、创建脚本，实现 Image 常规的拖拽功能

3、把脚本挂载到场景 Image 上

4、运行场景，效果如图

常规拖拽在3D空间拖拽位置跳动问题

5、切换到 3D 空间场景中，使用Laser镭射线，代替鼠标交互移动 UI Image，效果如图

（Laser镭射线交互当，不小心移动到屏幕外，常规的拖拽移动UI的方法会出现位置跳动）

解决常规拖拽在3D空间拖拽位置跳动问题的简单方法

6、根据常规拖拽出现的位置跳动问题，这里使用把获取到的 eventData.position 转为 世界坐标赋值给移动 UI - Image ，代码如下

7、在  3D 空间场景中，使用Laser镭射线交互，效果如下

六、关键代码

1、Drag.cs

using UnityEngine;
using UnityEngine.EventSystems;public class Drag : MonoBehaviour, IBeginDragHandler, IEndDragHandler, IDragHandler
{private Vector3 m_OffsetPos;public void OnBeginDrag(PointerEventData eventData){Debug.Log("OnBeginDrag");Vector3 pos;RectTransformUtility.ScreenPointToWorldPointInRectangle(gameObject.GetComponent(), eventData.position, eventData.enterEventCamera, out pos);m_OffsetPos = this.gameObject.GetComponent().position - pos;}public void OnEndDrag(PointerEventData eventData){Debug.Log("OnEndDrag");}public void OnDrag(PointerEventData eventData){Debug.Log("OnDrag");Vector3 pos;RectTransformUtility.ScreenPointToWorldPointInRectangle(this.gameObject.GetComponent(), eventData.position, eventData.enterEventCamera, out pos);this.gameObject.GetComponent().position = pos + m_OffsetPos;}
}

2、DragItem

using UnityEngine;
using UnityEngine.EventSystems;public class DragItem : MonoBehaviour, IBeginDragHandler, IEndDragHandler, IDragHandler
{private Vector3 m_OffsetPos;public void OnBeginDrag(PointerEventData eventData){Debug.Log("OnBeginDrag");// 方法一：//Vector3 pos;//RectTransformUtility.ScreenPointToWorldPointInRectangle(gameObject.GetComponent(), eventData.position, eventData.enterEventCamera, out pos);//m_OffsetPos = this.gameObject.GetComponent().position - pos;// 方法二：略有问题，暂时不用//Vector2 pos;//RectTransformUtility.ScreenPointToLocalPointInRectangle(gameObject.GetComponent(), eventData.position, eventData.enterEventCamera, out pos);//Vector3 tmp = this.gameObject.GetComponent().position;//m_OffsetPos.x = tmp.x - pos.x;//m_OffsetPos.y = tmp.y - pos.y;//m_OffsetPos.z = tmp.z;// 方法三：Vector3 pos = eventData.position;pos.z = 1080; // 根据 Canvas 与 Camera 实际距离赋值m_OffsetPos = this.transform.position - Camera.main.ScreenToWorldPoint(pos);}public void OnEndDrag(PointerEventData eventData){Debug.Log("OnEndDrag");}public void OnDrag(PointerEventData eventData){// 方法一：//Debug.Log("OnDrag eventData.position " + eventData.position.ToString());//Vector3 pos;//RectTransformUtility.ScreenPointToWorldPointInRectangle(this.gameObject.GetComponent(), eventData.position, eventData.enterEventCamera, out pos);//this.gameObject.GetComponent().position = pos + m_OffsetPos;// 方法二：略有问题，暂时不用//Vector2 pos;//RectTransformUtility.ScreenPointToLocalPointInRectangle(gameObject.GetComponent(), eventData.position, eventData.enterEventCamera, out pos);//this.gameObject.GetComponent().position = new Vector3(pos.x+m_OffsetPos.x,pos.y+m_OffsetPos.y,m_OffsetPos.z);// 方法三：Vector3 pos = eventData.position;pos.z = 1080;// 根据 Canvas 与 Camera 实际距离赋值this.transform.position = Camera.main.ScreenToWorldPoint(pos) + m_OffsetPos;Debug.Log("OnDrag pos " + pos.ToString());}
}