摘要：Unity+SenseAR2.3開發的AR應用，基於手勢識別同時計算手勢方向，發射你的愛心~
洪流學堂，讓你快人幾步。你好，我是你的技術探路者鄭洪智，你可以叫我大智。
這篇教程是爲了填上一篇教程給你留的坑，上一篇《Unity+SenseAR教程：用手勢發射愛心【源碼】》如果你還沒學習的話，先去學習哈！
上一節最後給你挖的坑是：如何計算出手勢的發射方向，讓粒子的發射方向和手勢一致呢？
上一節只給你留了個思路，這節課咱們一起來把這個坑填一填。
填坑後最終效果
上節最後的效果是全屏顯示心心：
這節最後的效果是這樣的，定向發射你所有的愛哦：
這節咱們主要解決幾個問題：
1、改造粒子讓它朝着一個方向發射
2、計算GUN手勢的槍口的位置和方向
3、隱藏手上的那些DEBUG的點（很多夥伴問如何隱藏掉，其實就一行代碼哈哈哈）
4、發佈
1、改造粒子讓它朝着一個方向發射
默認的粒子系統創建出來其實就是朝着一個方向發射的，咱們主要需要改一改它的默認參數，讓它發射的範圍小一點，像是從指尖發射出來的。
注意下圖中的幾個屬性：
**爲什麼還要你注意Rotation呢？**因爲待會咱們要讓粒子的發射方向和手的方向一致，粒子有旋轉的話計算起來麻煩一些，所以最好給他清零。
2、計算GUN手勢的槍口的位置和方向
接着上一節講的，ARStandGuesturePainter.cs中，先放出代碼：
if (guestureInfo.HandGestureType == ArHandGestureType.GUN ||
guestureInfo.HandGestureType == ArHandGestureType.I_LOVE_YOU ||
guestureInfo.HandGestureType == ArHandGestureType.FINGER_HEART)
{
HeartParticles.SetActive(true);
// m_Points中包含了手勢識別出來的點的位置，食指的關節分別是4，5，6，7（指尖）
if (m_Points.Count > 8)
{
// 使用SenseAR給的一個工具方法，轉爲viewport的座標（0,1）
// 注意在這旋轉屏幕時有BUG，大智沒有過多去調試，如果你想搞得完美一些，可以完善一下它的源碼
var startViewport = ARStandGestureUtil.TrasnPosition2D(m_Points[4], image.width, image.height);
var endViewport = ARStandGestureUtil.TrasnPosition2D(m_Points[7], image.width, image.height);
// 設置z值，下面轉換爲世界座標時代表與相機的距離
// 這個z其實是隨便填的，但是會影響粒子距離相機的遠近，填一個合適的值
startViewport.z = 1f;
endViewport.z = 1f;
// 轉爲世界座標
var start = m_camera.ViewportToWorldPoint(startViewport);
var end = m_camera.ViewportToWorldPoint(endViewport);
// 設置粒子的位置和方向
HeartParticles.transform.position = end;
HeartParticles.transform.forward = end - start;
}
}
else
{
HeartParticles.SetActive(false);
}
代碼裏註釋寫的很詳細了，不過還有幾點需要說明一下：
1、m_Points中的點與手關節的對應關係如下圖：
圖中是1-20，但是數組中是0-19，所以注意轉換一下。可以看到咱們食指的之間是P8，數組中的索引是7。食指的根部是P5，數組中的索引是4。
2、爲什麼要設置startViewport和endViewport的z值呢？
提前設置好z值後，在下面調用ViewportToWorldPoint後，就能直接得到與相機距離爲z的世界座標結果了。你要是還不清楚可以去看一下這個API的文檔：https://docs.unity3d.com/ScriptReference/Camera.ViewportToScreenPoint.html
其實手勢識別出來的手指關節位置本身是沒有深度的，相當於是一張照片。我們只是讓3D的粒子系統和2D的背景相機圖像融合在一起看起來好像都是3D的。
3、HeartParticles.transform.forward = end - start;這句代碼是啥意思？
這句代碼是個設置物體旋轉的簡便寫法，可以將物體的transform的forward向量，設置爲對應的方向。比如在這就是將粒子的forward（z軸）設置爲食指指向的方向。
所以第一步製作粒子的時候讓你最好不要有旋轉，否則設置forward可能得不出來你想要的結果。
爲什麼用forward向量，而不是用right或者up呢，這個要根據你的粒子的發射方向決定。大智做的粒子發射方向是forward，也就是z軸的方向。
3、隱藏手上的那些DEBUG的點
（很多夥伴問如何隱藏掉，其實就一行代碼哈哈哈）
手上的DEBUG點是在ARStandGuesturePainter代碼的PostRender方法中通過GL畫的，所以只要在PostRender方法的第一行加上個return;就好了。
啥？你說爲啥不直接刪掉？刪掉你以後想再加上不就找不到了。
4、發佈
發佈不多說了，上一節課已經講過了，好多同學卡到gradle中的maven庫被牆的問題，可以到我之前的一篇文章看一下：《SenseAR常見問題總結》https://www.jianshu.com/p/435a3f90a6e2
源碼及更多探索
由於源碼後續會更新，就不直接打包傳在這裏了。
本工程的持續更新源碼可以在洪流學堂公衆號回覆愛心獲取。
這節課只是處理了食指，但是對於ILOVEYOU和比心手勢來說，這樣可能不夠精確，剩下的交給你來做咯！
擴展閱讀
Unity+SenseAR教程：用手勢發射愛心【源碼】
SenseAR常見問題總結
【視頻】商湯SenseAR全功能初體驗(含填坑經驗)
【視頻】商湯SenseAR全功能初體驗(含填坑經驗)：B站
好了，今天就絮絮叨叨到這裏了，沒講清楚的地方歡迎評論。
我是大智（個人微信：zhz11235），你的技術探路者，下次見！
別走！點贊，收藏哦！
好，你可以走了。