EasyAR 一课一练 | 与模型的交互

阅读 87
收藏 4
2017-04-09
原文链接:www.jianshu.com

EasyAR 开发者交流群:605785368

AR开发者社区:


随着AR技术的不断完善,目前市面上涌出来越来越多的AR应用或游戏,这对于AR的进一步普及是有很大帮助的。接下来我总结了目前各大应用商店里的AR app的一些交互手段(或说主要功能也行),并通过EasyAR SDK+ unity方式分享给大家。

与AR模型的互动

在开发AR应用时,我们常用实现一个功能,那就是与产生的AR模型产生交互,具体操作是我们点击模型,然后播放一些炫酷的动画或产生“亮瞎眼”的粒子特效等 。其实作为开发者,有点unity基础的可以很简单的实现。

首先我们把要产生的AR模型放置EasyAR 的Imagetarget 下(若没有EasyAR 开发基础,可以看下我之前的教程)。



然后,给模型添加BoxCollider,并勾选Trigger



然后在模型上挂一个新建的代码,里面添加如下方法:

void OnMouseDown()

{

}

在该方法里面实现,比如替换动画,产生粒子特效等。


单指实现旋转模型

实现这样的交互,我们主要用到unity 的Input类,具体代码如下:

using UnityEngine;
using System.Collections;

public class SelfRotate1 : MonoBehaviour {

private Touch oldTouch1;  //上次触摸点1(手指1)

private Touch oldTouch2;  //上次触摸点2(手指2)

void Start()

{

}

void Update () {

//没有触摸

if ( Input.touchCount <= 0 ){

return;

}

//单点触摸, 水平上下旋转

if( 1 == Input.touchCount ){

Touch touch = Input.GetTouch (0);

Vector2 deltaPos = touch.deltaPosition;

transform.Rotate(Vector3.down  * deltaPos.x , Space.World);

transform.Rotate(Vector3.right * deltaPos.y , Space.World);

}

}

}

双指实现缩放模型

比如在目前比较火的视+ APP上的一些好玩的AR效果中就有类似的交互

替换视频

那么如何实现了?我们主要用到unity 的Input类,具体代码如下:

using UnityEngine;

using System.Collections;

public class SelfRotate1 : MonoBehaviour {

private Touch oldTouch1;  //上次触摸点1(手指1)

private Touch oldTouch2;  //上次触摸点2(手指2)

void Start()

{

}

void Update () {

//多点触摸, 放大缩小

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

//最小缩放到 0.3 倍

if (scale.x > 0.3f && scale.y > 0.3f && scale.z > 0.3f) {

transform.localScale = scale;

}

//记住最新的触摸点,下次使用

oldTouch1 = newTouch1;

oldTouch2 = newTouch2;

}

}

一般我们在开发中,常常会把单指旋转与双指缩放放在一个脚本中一起实现,完整代码如下(下载地址:链接: https://pan.baidu.com/s/1pL0iNlL 密码: a9ef)

using UnityEngine;

using System.Collections;

public class SelfRotate1 : MonoBehaviour {

private Touch oldTouch1;  //上次触摸点1(手指1)

private Touch oldTouch2;  //上次触摸点2(手指2)

void Start()

{

}

void Update () {

//没有触摸

if ( Input.touchCount <= 0 ){

return;

}

//单点触摸, 水平上下旋转

if( 1 == Input.touchCount ){

Touch touch = Input.GetTouch (0);

Vector2 deltaPos = touch.deltaPosition;

transform.Rotate(Vector3.down  * deltaPos.x , Space.World);

transform.Rotate(Vector3.right * deltaPos.y , Space.World);

}

//多点触摸, 放大缩小

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

//最小缩放到 0.3 倍

if (scale.x > 0.3f && scale.y > 0.3f && scale.z > 0.3f) {

transform.localScale = scale;

}

//记住最新的触摸点,下次使用

oldTouch1 = newTouch1;

oldTouch2 = newTouch2;

}

}

手指移动人物到指定位置

在视+ APP中也可以看到类似的应用:

替换视频

具体是怎么实现的其实还是主要应用Input这个类

我们首先新建一个类,开头定义一个用来决定人物移动的速度

public float speed = 0.01F;

然后在Update里实现:

void Update()

{

//判断是否有手指触摸屏幕

if (Input.touchCount > 0 && Input.GetTouch(0).phase == TouchPhase.Moved)

{

//获取手指触摸位置

Vector3 touchDeltaPosition = Input.GetTouch(0).deltaPosition;

transform.Translate(-touchDeltaPosition.x * speed, touchDeltaPosition.y * speed, 0);

}

}

按钮实现AR模型的交互

在开发AR App中,我们也常常运用一个比较常见的功能,那就是用虚拟按钮来实现AR模型的浏览,比如,在建筑AR应用中,我们可以识别一张卡片后,显示AR 建筑,并通过按钮来前后浏览不同的AR建筑模型。

我们可以在unity创建两个Button,然后在EasyAR 的ImageTarget下创建多个子物体,并且设置这些模型不显示,模型大家可以随便下载,Button的贴图大家也可以改,这是unity基本知识,我在这就不啰嗦了,比如效果如下:



然后建一个空物体,在上面挂上一个新建的代码ShowEnemy(下载地址:链接:https://pan.baidu.com/s/1kVnzK5T 密码: 69tj):

usingUnityEngine;

usingSystem.Collections;

publicclassShowEnemy:MonoBehaviour{

publicGameObject[]enemys;

privateintindex=0;

privateintlength;

//Usethisforinitialization

voidStart(){

length=enemys.Length;

}

//Updateiscalledonceperframe

voidUpdate(){

}

publicvoidNext()

{

if(index>=length-1){

index=0;

}else{

index++;

}

enemys[index].transform.gameObject.SetActive(true);

for(inti=0;i

if(i!=index){

enemys[i].transform.gameObject.SetActive(false);

}

}

}

publicvoidPre()

{

if(index<=0){

index=length-1;

}else{

index--;

}

enemys[index].transform.gameObject.SetActive(true);

for(inti=0;i

if(i!=index){

enemys[i].transform.gameObject.SetActive(false);

}

}

}

}



ps:模型大家可以自行选择

最后,分别把这些方法赋给那两个Button



评论