找回密码
 立即注册
搜索
EasyAR 教程 Unity 查看内容

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

AlbertLee 2017-7-19 14:52

AR 开发中常用的交互功能总结

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

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

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

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


Step 1:导入项目

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



下载好后,我们将HelloARunity 中打开


在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();

        }

    }
}



鲜花
鲜花 (3)
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋

刚表态过的朋友 (3 人)

分享至 : QQ空间
收藏
  • lydhhxx 2017-9-28 18:58
    为什么无法拖动
  • AlbertLee 2017-9-8 10:10
    yxq214707: 请问这个交互是用unity5.5.1实现吗
    是的,unity版本是5.5.1
  • yxq214707 2017-9-5 11:22
    请问这个交互是用unity5.5.1实现吗
  • AlbertLee 2017-7-25 23:06
    crazy2526: 想学习视+app那种原生搭建,求教程
    正在制作
  • yyf19910825 2017-7-21 08:56
    crazy2526: 想学习视+app那种原生搭建,求教程
    +1
  • crazy2526 2017-7-20 18:45
    想学习视+app那种原生搭建,求教程

查看全部评论>>