【碼蟻君】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的環境哦！
  

---

最後，我拿着我的手機，讓女盆友去掃她的工牌，她說她很喜歡。
我很滿意。

---

如果覺得有用好玩的話，關注碼蟻君，更多好玩等着你~