【EasyAR实战项目】图像追踪+触屏交互

本文涉及的产品
检索分析服务 Elasticsearch 版,2核4GB开发者规格 1个月
智能开放搜索 OpenSearch行业算法版,1GB 20LCU 1个月
实时数仓Hologres,5000CU*H 100GB 3个月
简介: 全网首发EasyAR图像追踪实战项目,零基础也能做AR项目!本文章从下载Unity、EasyAR SDK开始,到模型的导入再到图像识别的处理到交互脚本的编写最后到项目的导出和运行结果,步骤解析的十分详细,非常适合新手小白做AR开发。

 话不多说,先看实现效果

image.gif编辑

开发准备

以下为作者开发的环境,当然也可以使用更高的版本,尤其是EasyAR的版本可以选择更高的,因为这玩意儿版本迭代的太快了,而且更高版本所支持的手机型号更新,兼容性更强。

1 Unity Hub2020.3.33

下载地址  Unity所有版本下载 | Unity中国官网

2 EasyAR Sense Unity Plugin4.2

下载地址  下载-EasyAR官网

3 VScode

下载地址  Download Visual Studio Code - Mac, Linux, Windows

4 图片与3D模型(以下下载内容为本项目中使用的资源)

下载地址  Muryotaisu | 角色 | Unity Asset Store

工具下载

Unity Hub与Plugin下载

image.gif编辑

安装JDK和Android SDK模块,若电脑环境为IOS就使用IOS Build Support

image.gif编辑

EasyAR SDK下载

image.gif编辑

image.gif编辑获取Sense License Key

image.gif编辑

登录后申请Sense许可证image.gif编辑

稀疏空间矩阵在本项目中用不到,如果后续需要也可以申请。应用名称取啥都可以,但是Package Name必须要与自己创建的3D模板包一致(见开发步骤中第一步)

这里PackageName填错了,正确的应该是 com.DefaultCompany.EasyARdem1

image.gif编辑

开发步骤

1 创建3D模板

注意:此时的Package name应当与所申请Sense许可证中填写的Package Name相一致

image.gif编辑

2 将EasyAR SDK导入到环境中

image.gif编辑

image.gif编辑

image.gif编辑

3 配置EasyAR基本信息

image.gif编辑

image.gif编辑

回到开发者中心获取Sense Lisense Keyimage.gif编辑

4 导入3D模型与所需识别的图片

因为作者下载过该模型,所以可以直接在Unity中打开,若第一次下载与上述EasyAR SDK的导入方法一致

image.gif编辑

image.gif编辑

将模型放置于环境中image.gif编辑

在Assets目录下创建一个StreamingAssets文件,将所后续所需识别的图片放置在该文件夹中

image.gif编辑

6  将Image Target与EasyAR_Image_Tracker文件放入工程中

image.gif编辑

image.gif编辑

7 在ImageTarget对象中,将所需识别的图片放入Image Target Controller脚本中,当照片的名字输入正确后,场景中会自动出现所对应的照片

将Tracker对象设置为ImageTracker

image.gif编辑

8 在Easy_AR_ImageTracker对象中的AR Session脚本中的Center Target对象设置为ImageTarget

image.gif编辑

9 调整对象的位置与所需识别图片之间的距离

image.gif编辑

10  配置Camera的属性

image.gif编辑

11 编写放缩与旋转脚本,实现用户对3D模型对象的交互

创建脚本

在文件夹中右击-->creat-->C#Script

image.gif编辑

脚本代码如下

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class suofang : MonoBehaviour
{
    private Touch oldTouch1;  //上次触摸点1(手指1)
    private Touch oldTouch2;  //上次触摸点2(手指2)
    void Update()
    {
        //没有触摸,就是触摸点为0
        if (Input.touchCount <= 0)
        {
            return;
        }
        //单点触摸, 水平上下旋转
        if ( Input.touchCount ==1)
        {
            Touch touch = Input.GetTouch(0);
            Vector2 deltaPos = touch.deltaPosition;
            transform.Rotate(Vector3.down * deltaPos.x, Space.World);//绕Y轴进行旋转
            transform.Rotate(Vector3.right * deltaPos.y, Space.World);//绕X轴进行旋转,下面我们还可以写绕Z轴进行旋转
        }
        //多点触摸, 放大缩小
        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 / 75f;
        Vector3 localScale = transform.localScale;
        Vector3 scale = new Vector3(localScale.x + scaleFactor,
                                    localScale.y + scaleFactor,
                                    localScale.z + scaleFactor);
        //在什么情况下进行缩放
        if (scale.x >= 0.5f && scale.y <= 2f)
        {
            transform.localScale = scale;
        }
        //记住最新的触摸点,下次使用
        oldTouch1 = newTouch1;
        oldTouch2 = newTouch2;
    }
}

image.gif

将脚本对象拖放于模型上

image.gif编辑

文件导出

文件导出为apk格式,可直接在手机上运行

1 设置导出格式,勾选ARM64和IL2CPP是为了提高该项目与手机环境的兼容性

image.gif编辑

image.gif编辑

image.gif编辑

2 将电脑调试转换成安卓平台

image.gif编辑

3 电脑和手机通过USB进行连接,随后在Run Device选项中选择自己的手机,点击Buile and Run即可

image.gif编辑

4 如果每次调试通过这种方式还是比较麻烦的,其实只要第一次在Build setting中设置好格式后,之后在文件中直接点击Build and Run即可快速调试

5 成功运行后在手机桌面上会有该项目的软件

image.gif编辑

运行结果

image.gif编辑

本项目中的手势交互为用户触屏,还有一个更符合AR体验的方式,即隔空手势交互,可参考下述文章

【AR隔空手势交互】Unity中基于Manomotion实现隔空手势交互_北村南的博客-CSDN博客_unity 手势交互


目录
相关文章
|
5月前
|
图形学 C#
超实用!深度解析Unity引擎,手把手教你从零开始构建精美的2D平面冒险游戏,涵盖资源导入、角色控制与动画、碰撞检测等核心技巧,打造沉浸式游戏体验完全指南
【8月更文挑战第31天】本文是 Unity 2D 游戏开发的全面指南,手把手教你从零开始构建精美的平面冒险游戏。首先,通过 Unity Hub 创建 2D 项目并导入游戏资源。接着,编写 `PlayerController` 脚本来实现角色移动,并添加动画以增强视觉效果。最后,通过 Collider 2D 组件实现碰撞检测等游戏机制。每一步均展示 Unity 在 2D 游戏开发中的强大功能。
281 6
|
5月前
|
开发框架 API 开发者
Flutter表单控件深度解析:从基本构建到高级自定义,全方位打造既美观又实用的移动端数据输入体验,让应用交互更上一层楼
【8月更文挑战第31天】在构建美观且功能强大的移动应用时,表单是不可或缺的部分。Flutter 作为热门的跨平台开发框架,提供了丰富的表单控件和 API,使开发者能轻松创建高质量表单。本文通过问题解答形式,深入解读 Flutter 表单控件,并通过具体示例代码展示如何构建优秀的移动应用表单。涵盖创建基本表单、处理表单提交、自定义控件样式、焦点管理和异步验证等内容,适合各水平开发者学习和参考。
136 0
|
移动开发 前端开发 JavaScript
分享8个前端可以制作360度WebVr全景视图框架
分享8个前端可以制作360度WebVr全景视图框架
1885 0
分享8个前端可以制作360度WebVr全景视图框架
|
8月前
|
XML Java Android开发
Android App开发之图像加工中给图像添加水波动态特效(附源码和演示视频 简单易懂)
Android App开发之图像加工中给图像添加水波动态特效(附源码和演示视频 简单易懂)
99 0
|
Web App开发 编解码 移动开发
探秘移动端网页调用摄像头的两种方式
PC 端网页调用摄像头的场景想必大家并不陌生,打开一个网址,开启摄像头开始笔试/视频聊天/直播等。 而在移动端网页调用摄像头的场景你见得多吗?我想答案应该是不多吧(在下见识浅薄)。
|
传感器 自动驾驶 算法
SLAM:SLAM(即时定位与地图构建)的简介、发展、案例应用之详细攻略
SLAM:SLAM(即时定位与地图构建)的简介、发展、案例应用之详细攻略
|
缓存 定位技术 开发工具
百度地图开发-与地图的交互功能 06
百度地图开发-与地图的交互功能 06
240 0
|
前端开发 UED
前端图片编辑功能的实践小结
前端图片编辑功能的实践小结
|
数据可视化 定位技术 Android开发
可视化炫技利器诞生——VISLAB交互动画组件包发布,附详细介绍
VISLAB交互组件包的出现极大地拓展了DataV的展示与交互能力,本文作者—阿里云MVP陈琦将详细介绍此组件包的应用场景,并分享一些可视化数据分析案例与可视化心得。
4746 0
|
Web App开发
移动端基础事件和交互(未完待续)
移动端基础事件和交互
1292 0