【码蚁君】AR实战-圣诞礼物EasyAR+Unity

---

AR实战-圣诞礼物[EasyAR+Unity]

hey yo，圣诞节又快到了，哎！又在为送什么礼物而头疼！！
当我准备打开淘宝搜“圣诞音乐盒”送给女盆友时，AR礼物成功引起了我的注意……

看这效果图！！卧槽！！酷炫吊炸天！！

她肯定会喜欢的！（？）

想学吗！码蚁君教你如何把AR圣诞礼物送给她！！

---

Demo项目下载地址：
https://pan.baidu.com/s/1LQVJJ8y5KAP45_wgzsi0Dw
提取码: 9m3q

---

一、准备工作

在开发前，需要准备一些环境，本案例用的是EasyAR+Unity。

1.1 开发环境

名称	版本	下载地址
Easy AR	EasyARSense_3.0.1-final_Basic	EasyAR3.0.1官网下载
Unity	中国增强版 2018.4.8c3	Unity Hub中国增强版下载

1.2 打包工具

Unity有打包安卓apk的功能，但是前提是有Java开发环境和安卓的SDK，我这里用到的是java1.8，如果不会的请戳菜鸟教程-Java安装

1.3 EasyAR注册

因为要使用到EasyAR提供的AR云识别功能，所以首先需要注册一个新的账号，每个新账号可以免费使用一个月的云识别功能。

先到EasyAR官网注册一个账号，登录后点开发者中心，新建一个应用，获取License Key。

新建云识别图库，刚开始是免费一个月试用，够学习玩耍了~
该图库拿来上传你需要识别的目标卡片，当应用的摄像头拍到该物体就会回调会Unity的脚本里，后面会详细讲解~

新建完图库，得到了这三样东西，是调起AR Camera的必要参数：

1. Cloud Key
2. Cloud Secret
3. Cloud URLs
   

1.4 一个对象

如果没有对象的话，可以关掉这个教程了！！不适合你！！

哼唧，开个玩笑！嘻嘻。
至此，准备工作已经全部做完啦~准备制作圣诞礼物啦！！

---

二、Unity开发

2.1 新建工程

打开Unity，新建一个3d工程，双击导入EasyAR的UnityPackage（EasyARSense_3.0.1-final_Basic.unitypackage）.
然后把事先准备好的模型统统导进去！

DEMO内含模型有[\ar-gift\Assets\Resources]，DEMO下载地址在最上面！！：

1. HatsuneMikuModel（初音）
2. KTK_Effect_Samples（粒子爆炸）
3. ChristmasCustomizationBox（圣诞礼物）

【初音换成你喜欢的任何模型都可以~】

我不会告诉你最初我想捏一个这样的3d模型，可惜手法不行，捏得太丑了就放弃了。

什么？？？你问我为什么比中指？？看清楚好吗！！ 这是

（Fuck爆炸无敌）+（喜欢你）的意思！！哼！！

回归正题，导入完毕，目录结构如下：

2.2 搭建场景Scene

找到EasyAR提供的官方Sample，找到这个HelloAR_ImageTarget_Cloud.unity.
在项目根目录下，新建自己的Scene，把刚刚EasyAr场景下的所有组件复制到自己的场景中。

• Main Camera
• Directional Light
• EasyAR_Setup
• CloudRecognizer
  

2.3 配置License Key和云识别授权

配置License Key

把刚刚从EasyAR那得到的SDK License Key复制一下，粘贴到Assets/EasyAR/Common/Resources/EasyARKey.asset下

配置云识别参数

复制Cloud Key、Cloud Secret、Cloud URLs中的Client-end地址（因为应用是作为客户端）到场景中的CloudRecognizer组件中。

2.4 初跑demo

PC上运行应用需要有摄像头，如果是笔记本自带没问题，如果是台式机，可以像我一样，花了19块买了个超级渣的摄像头。

去云识别图库那上传一张目标识别卡片，这个宽度是指现实卡片的宽度，填个差不多的就行了。

回来Unity初跑一下demo，用摄像头拍着你的目标卡片，如果不出意外的话，会出现这个玩意儿。

如果出现了这个预设模型，已经成功了一半啦！！

---

2.5 编写脚本，控制模型

首先，思考一下，当你摄像头拍到目标卡片后，请求EasyAR服务，成功识别后，应该会回调到一个地方，初始化你的模型代码。

修改扫描后首次出现的模型

打开 /Assets/EasyAR/Scripts/CloudRecognizeBehaviour.cs 文件：
在Open方法下有初始化模型的代码，把它替换成圣诞礼物盒的模型路径。

现在再扫目标卡片，出现的就是圣诞礼物盒子啦！~

圣诞礼物盒添加点击事件

我也是刚学Unity，点击事件用的是最简单的，给GameObject添加Collider，然后监听OnMouseDown，可能也很多种方式添加点击事件哈！！

找到礼物盒的预设，点击打开，给礼物添加Box Collider Component。
【/Assets/Resources/ChristmasCustomizationBox/Gifts/Prefabs/Box01】
缩放成和盒子差不多大小，如图

新建脚本，/Assets/Scripts/GiftController.cs，编写点击礼物盒后的效果。

GiftController.cs代码：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class GiftController : MonoBehaviour
{

    void OnMouseDown()
    {
        //爆炸粒子效果1加载
        var explosion1 = Instantiate(Resources.Load("KTK_Effect_Samples/Prefab/Eff_Burst_2_oneShot", typeof(GameObject)) as GameObject);
        explosion1.transform.SetParent(this.transform.parent);
        explosion1.gameObject.transform.localScale = new Vector3(0.5f, 0.5f, 0.5f);
        explosion1.gameObject.transform.localPosition = new Vector3(0, 0, 0);
        explosion1.gameObject.transform.localRotation = Quaternion.Euler(90, 0, 0);
        
        //爆炸粒子效果2加载
        var explosion2 = Instantiate(Resources.Load("KTK_Effect_Samples/Prefab/Eff_Heal_2_oneShot", typeof(GameObject)) as GameObject);
        explosion2.transform.SetParent(this.transform.parent);
        explosion2.gameObject.transform.localScale = new Vector3(0.5f, 0.5f, 0.5f);
        explosion2.gameObject.transform.localPosition = new Vector3(0, 0, 0);
        explosion2.gameObject.transform.localRotation = Quaternion.Euler(90, 0, 0);

        //延迟1s销毁粒子
        Destroy(explosion1, 1f);
        Destroy(explosion2, 1f);

        //初音模型加载
        var hatsuneRumba = Instantiate(Resources.Load("HatsuneMikuModel/HatsuneRumbaPrefab", typeof(GameObject)) as GameObject);
        hatsuneRumba.transform.SetParent(this.transform.parent);
        hatsuneRumba.gameObject.transform.localScale = new Vector3(0.4f, 0.4f, 0.4f);
        hatsuneRumba.gameObject.transform.localRotation = Quaternion.Euler(90, 180, 0);
        hatsuneRumba.gameObject.transform.localPosition = new Vector3(0, 0, 0);

        //二维码加载
        var wechatCode = Instantiate(Resources.Load("WechatCode/WechatCode", typeof(GameObject)) as GameObject);
        wechatCode.transform.SetParent(this.transform.parent);
        wechatCode.gameObject.transform.localScale = new Vector3(0.04f, 0.04f, 0.04f);
        wechatCode.gameObject.transform.localRotation = Quaternion.Euler(-90, 0, 0);
        wechatCode.gameObject.transform.localPosition = new Vector3(0.5f, 0, -0.5f);

        //隐藏箱子
        Destroy(this.transform.gameObject);
    }

}

（我觉得礼物盒静止不动很丑，我自己添加了些动画在里面，所以会有个Animator在那）

把脚本添加到Box01预设上，大功告成！！运行扫描目标卡片，就会出现漂亮的圣诞礼物盒啦！

---

三、打包成可运行程序

Unity打包安卓，这里就不赘述啦！网上很多教程，简单来说步骤为：
Build Setting -> 切换成Android -> 填写好Package Name（这里的包名要和License Key那的包一样的名） -> Build

• 前提是已经有Java和安卓SDK的环境哦！
  

---

最后，我拿着我的手机，让女盆友去扫她的工牌，她说她很喜欢。
我很满意。

---

如果觉得有用好玩的话，关注码蚁君，更多好玩等着你~