EasyAR开发技巧---模型交互操作

我们在EasyAR 初学者入门系列的第一篇教程中展现了EasyAR 最基本的功能，使得一个模型以AR技术呈现在我们面前，实在炫酷。扫描识别图之后展现一个模型，如果仅仅是静态的，体验效果也不是很好，所以根据市面上的常见AR APP，给大家总结了几种常见的AR模型的交互方式。我们在最基础的 HelloAR 这个项目的基础上进行开发，前提是大家已经掌握好了如何基础性的搭建EasyAR+unity 的开发方式，不懂得伙伴可以跳转到：

EasyAR 初学者入门指南（1）---显示模型 阅读。

关于交互方式，在这里主要给大家提供思路以及脚本文件。

源码：链接: https://pan.baidu.com/s/1pKSy5jP 密码: yy2b

Step 1:导入项目

我们以后的开发都在EasyAR 的官方项目"HelloAR" 的基础上进行，首先我们需要到官网上下载并导入unity中

下载好后，我们将HelloAR 在unity 中打开

在unity中打开之后，我们打开"HelloAR" 这个场景，然后到官网申请Key

Step 2:点击模型本身交互

预览：

实现功能：点击Cube（扫描识别图出现的模型）我们可以更换它的颜色。

我们先删除另外两个不用的ImageTarget，只在"ImageTarget-JsonFile-idback" 身上做文章

我们新建一个Material，命名为"blue"

然后在Cube 上新建一个脚本"ChangeColor",来实现点击时cube 颜色的改变，这段脚本属于unity 最基本的知识，主要是定义两个Material ，然后在OnMouseDown（) 方法中进行修改替换，同时我们也定义了一个布尔类的标识位。

脚本地址：链接: https://pan.baidu.com/s/1miidEOS 密码: 5x6d

using System.Collections;using System.Collections.Generic;using UnityEngine;public class ChangeColor : MonoBehaviour {    public Material blue;    public Material id;    private bool isClick = false;    // Use this for initialization    void Start () {        }    // Update is called once per frame    void Update () {       }    void OnMouseDown()    {        if (!isClick) {            this.gameObject.GetComponent<MeshRenderer> ().material = blue;            isClick = true;        } else {            this.gameObject.GetComponent<MeshRenderer> ().material = id;            isClick = false;        }    }}

Step 2:双手缩放

预览：

在开发AR APP功能开发时，双手缩放是最常见的功能，这也是一种最自然的交互手段，实现这样的功能也非常的简单，我们在Cube 上挂一个脚本,命名为"Gesture"

脚本地址：链接: https://pan.baidu.com/s/1geDLOPl 密码: ykwf

using UnityEngine;using System.Collections;public class Gesture : MonoBehaviour {    private Touch oldTouch1;  //上次触摸点1(手指1)    private Touch oldTouch2;  //上次触摸点2(手指2)    void Update()    {        //没有触摸，就是触摸点为0        if (Input.touchCount <= 0)        {            return;        }             //多点触摸, 放大缩小        Touch newTouch1 = Input.GetTouch(0);        Touch newTouch2 = Input.GetTouch(1);        //第2点刚开始接触屏幕, 只记录，不做处理        if (newTouch2.phase == TouchPhase.Began)        {            oldTouch2 = newTouch2;            oldTouch1 = newTouch1;            return;        }        //计算老的两点距离和新的两点间距离，变大要放大模型，变小要缩放模型        float oldDistance = Vector2.Distance(oldTouch1.position, oldTouch2.position);        float newDistance = Vector2.Distance(newTouch1.position, newTouch2.position);        //两个距离之差，为正表示放大手势， 为负表示缩小手势        float offset = newDistance - oldDistance;        //放大因子， 一个像素按 0.01倍来算(100可调整)        float scaleFactor = offset / 100f;        Vector3 localScale = transform.localScale;        Vector3 scale = new Vector3(localScale.x + scaleFactor,            localScale.y + scaleFactor,            localScale.z + scaleFactor);        //在什么情况下进行缩放        if (scale.x >= 0.05f && scale.y >=0.05f && scale.z >= 0.05f)        {            transform.localScale = scale;        }        //记住最新的触摸点，下次使用        oldTouch1 = newTouch1;        oldTouch2 = newTouch2;    }}

Step 3：任意拖动

预览：

脚本地址：链接: https://pan.baidu.com/s/1pL7Je9l 密码: s4g5

这样的功能在市面上的AR APP 中也很常见，比如视+ APP，我们可以快速的将模型拖动到任何位置。我们同样的在Cube新建段脚本，命名为"Drag"

using System.Collections;using System.Collections.Generic;using UnityEngine;public class Drag : MonoBehaviour {    private Vector3 _vec3TargetScreenSpace;// 目标物体的屏幕空间坐标    private Vector3 _vec3TargetWorldSpace;// 目标物体的世界空间坐标    private Transform _trans;// 目标物体的空间变换组件    private Vector3 _vec3MouseScreenSpace;// 鼠标的屏幕空间坐标    private Vector3 _vec3Offset;// 偏移    void Awake() { _trans = transform; }    IEnumerator OnMouseDown()    {        // 把目标物体的世界空间坐标转换到它自身的屏幕空间坐标        _vec3TargetScreenSpace = Camera.main.WorldToScreenPoint(_trans.position);        // 存储鼠标的屏幕空间坐标（Z值使用目标物体的屏幕空间坐标）        _vec3MouseScreenSpace = new Vector3(Input.mousePosition.x, Input.mousePosition.y, _vec3TargetScreenSpace.z);        // 计算目标物体与鼠标物体在世界空间中的偏移量        _vec3Offset = _trans.position - Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace);        // 鼠标左键按下        while (Input.GetMouseButton(0))        {            // 存储鼠标的屏幕空间坐标（Z值使用目标物体的屏幕空间坐标）            _vec3MouseScreenSpace = new Vector3(Input.mousePosition.x, Input.mousePosition.y, _vec3TargetScreenSpace.z);            // 把鼠标的屏幕空间坐标转换到世界空间坐标（Z值使用目标物体的屏幕空间坐标），加上偏移量，以此作为目标物体的世界空间坐标            _vec3TargetWorldSpace = Camera.main.ScreenToWorldPoint(_vec3MouseScreenSpace) + _vec3Offset;            // 更新目标物体的世界空间坐标            _trans.position = _vec3TargetWorldSpace;            // 等待固定更新            yield return new WaitForFixedUpdate();        }    }}