今回は、AR Foundationの平面検出機能を使い、タップした平面に箱を配置するということをしていきたいと思います!
学習に使った本はこちら!
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
Amazon Kindle Unlimited でもUnityの本はいっぱいあるんじゃ!!
前回の「ARで箱を表示してみよう!」の続きになりますので、まだ見ていない方はぜひ見てください!!
平面を検出する
AR Plane Managerの配置
AR Plane Manegerが、今回の主役となる平面検出を担ってくれる機能です。
これをAR Session Originに追加することで、平面検出を可能にしてくれます。
まずは、前回の画面を表示してください!
前回作成した「AR Session Origin」を編集していきます!
![](https://teech-lab.com/wp-content/uploads/2021/02/ed4ed05e4468e10501d06719347f3d13-1024x576.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/ed4ed05e4468e10501d06719347f3d13-1024x576.jpg)
「AR Session Origin」を選択し、Add Component>AR Plane Managerを追加します!
![](https://teech-lab.com/wp-content/uploads/2021/02/7d997acae85d9e83edaf1261d510b5c3-1024x576.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/7d997acae85d9e83edaf1261d510b5c3-1024x576.jpg)
下の画像のようになっていれば、OKです!
![](https://teech-lab.com/wp-content/uploads/2021/02/32a209b3753432e519059ff1a0fc6526-1024x576.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/32a209b3753432e519059ff1a0fc6526-1024x576.jpg)
「Plane Prefab」が、None(Game Object)になっていると思います。
このままの場合、平面の検出はしてくれますが、どこが平面として検出してくれているかわからない状態です。
今回は、平面を確認したいのでPlaneを追加したいと思います!
Planeを作成
Hierarchyで、右クリック>XR>AR Default Plane を選択します!
![](https://teech-lab.com/wp-content/uploads/2021/02/9d32e4971a98acd216e3526f3cc54ded-1024x576.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/9d32e4971a98acd216e3526f3cc54ded-1024x576.jpg)
AR Default PlaneがHierarchyに配置されたと思います!
次に、Project>AssetsにPrefabsというフォルダを作成し、Prefabsフォルダに作成されたAR Default Planeをドラックします。
下の画像のように、AR Default Planeが青くなっていたらOKです!
![](https://teech-lab.com/wp-content/uploads/2021/02/4adddead741342b703a16f23a5ca3c89-1024x576.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/4adddead741342b703a16f23a5ca3c89-1024x576.jpg)
次は、Hierarchyから「AR Default Plane」を一旦削除します。
![](https://teech-lab.com/wp-content/uploads/2021/02/7e397e05036787c2aaf1bb952ca6686f-1024x576.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/7e397e05036787c2aaf1bb952ca6686f-1024x576.jpg)
削除ができたら、先ほどPrefabsフォルダに入れた「AR Default Plane」を、AR Session Origin>AR Plane Manager>Plane Prefabにドラックします!
![](https://teech-lab.com/wp-content/uploads/2021/02/b57f3824b2b46a181d4e31111f8dcd85-1024x576.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/b57f3824b2b46a181d4e31111f8dcd85-1024x576.jpg)
最終的に、上の写真のようになっていればOKです!
これで平面検出ができるようになりました!
平面に箱を配置する
今はまだ、平面を検出できるようにしただけで、ただ平面にAR Default Planeが表示されるだけです。
次は、平面に箱を配置するということをやっていきたいと思います!
少々、理解が難しいことも含まれますが、とりあえずこうすればいいんだ!!って思っていただけるといいと思います。
AR Raycast Managerの配置
Raycastとは、光線だと認識してもらえればいいと思います!
光線と先ほどのAR Default Planeがぶつかる場所に箱を配置します。
詳しく知りたい方は、Unity公式ページのリンクを参照してみてください!!
AR Session Origin > Add Component > AR Raycast Manager を追加します!
![](https://teech-lab.com/wp-content/uploads/2021/02/de3b69147c862f16e05eb8576faf2cfc-1024x531.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/de3b69147c862f16e05eb8576faf2cfc-1024x531.png)
下の写真のようになっていればOKです!
![](https://teech-lab.com/wp-content/uploads/2021/02/f90f9faf8724f1276e99a5acf730b59b-1024x531.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/f90f9faf8724f1276e99a5acf730b59b-1024x531.png)
タップ位置を取得する
次からは、少しコーディングをしていきます。
まずは、Project>AssetsにScriptsフォルダを作成してください。
Scriptsフォルダを作成したら、そこにCreate>C# Scriptを選択し、C#ファイルを作成してください!
C#の名前は、任意に変更してください!(今回は、CubeGeneraterとしてます!)
![](https://teech-lab.com/wp-content/uploads/2021/02/0becfcf4d8c7df1b1f9c1516ae496d3d-1024x576.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/0becfcf4d8c7df1b1f9c1516ae496d3d-1024x576.jpg)
できたら、下の写真のようになっていると思います!
![](https://teech-lab.com/wp-content/uploads/2021/02/c1a59c38c3d12da249db625ce6ec3b64-1024x531.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/c1a59c38c3d12da249db625ce6ec3b64-1024x531.png)
作成されたC#ファイルを下のように編集します。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.XR.ARFoundation;
using UnityEngine.XR.ARSubsystems;
public class CubeGenerater : MonoBehaviour
{
// 平面に生成するオブジェクト
[SerializeField] GameObject CubeObject;
// ARRaycastManager
ARRaycastManager raycastManager;
// RaycastとPlaneが衝突した情報を格納
List<ARRaycastHit> hits = new List<ARRaycastHit>();
// Start is called before the first frame update
void Start()
{
// ARRaycastManager格納する
raycastManager = GetComponent<ARRaycastManager>();
}
// Update is called once per frame
void Update()
{
// 画面がタッチされたかチェック
if(Input.touchCount > 0)
{
// タッチ情報を格納
Touch touch = Input.GetTouch(0);
// タッチした位置からRayを飛ばして、Planeにヒットした情報をhitsに格納する
if(raycastManager.Raycast(touch.position, hits, TrackableType.Planes))
{
// Cubeを生成する
Instantiate(CubeObject, hits[0].pose.position, Quaternion.identity);
}
}
}
}
Visual Studioが標準で起動されると思います。Visual Studioで問題なければ、そのまま使ってもらえれば問題ないと思います。
もし、Visual Studio Codeを使用したい場合は、こちらを参考にしてください!
![](https://teech-lab.com/wp-content/uploads/2020/12/Dark-Blue-and-Pink-Abstract-Artists-Influencer-YouTube-Thumbnail-Set-2-300x169.png)
![](https://teech-lab.com/wp-content/uploads/2020/12/Dark-Blue-and-Pink-Abstract-Artists-Influencer-YouTube-Thumbnail-Set-2-300x169.png)
C#ファイルの編集が完了したら、一旦保存してUnityに戻ってください!
次に、AR Session Originに先ほど保存したC#ファイルをドラックしてください!
下の写真のようになればOKです!
![](https://teech-lab.com/wp-content/uploads/2021/02/cc29eb6b3754b61b65c7c36318b9a008-1024x531.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/cc29eb6b3754b61b65c7c36318b9a008-1024x531.png)
このままでは、作成したスクリプトのCube ObjectがNone(Game Object)のままなので、Cubeを選択してあげる必要があります。
まず、CubeをAssets>Prefabsにドラックしてください!
![](https://teech-lab.com/wp-content/uploads/2021/02/9f498b90ab424533f898c6d5b647e6f9-1024x531.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/9f498b90ab424533f898c6d5b647e6f9-1024x531.png)
Cubeも青くなったと思います。
青くなったらHierarchyから一旦、Cubeを削除します。
削除ができたら、Prefabsに入っているCubeをAR Session Origin>Cube Controller(名前は任意)>Cube Objectにドラックします!
![](https://teech-lab.com/wp-content/uploads/2021/02/48c8f277fac241dcfd9de42c49df5203-1-1024x531.png)
![](https://teech-lab.com/wp-content/uploads/2021/02/48c8f277fac241dcfd9de42c49df5203-1-1024x531.png)
これで完成です!!
ビルドして、実機で確認してみましょう!
実際に確認してみる!!
まずは、ビルドしましょう!!
Build Settings>Buildを選択し、生成された「Unity-iPhone.xcodeprojをXcodeで実行する流れです。わからなければ、前回を参考にしてみてください!
![](https://teech-lab.com/wp-content/uploads/2020/12/ad0c9dd45ef7bca1a71d8b43f9be0d1c-300x169.png)
![](https://teech-lab.com/wp-content/uploads/2020/12/ad0c9dd45ef7bca1a71d8b43f9be0d1c-300x169.png)
黄色の板みたいなものが、AR Default Planeと言っていたものです。
地面の一部を平面と認識してくれています。平面に向かってタップをすることで下の画像のように箱が配置されるはずです!
![](https://teech-lab.com/wp-content/uploads/2021/02/IMG_1806-576x1024.jpg)
![](https://teech-lab.com/wp-content/uploads/2021/02/IMG_1806-576x1024.jpg)
まとめ
今回は、ARで平面を検出し、検出した平面に箱を配置しました。
いくつか聞き慣れない単語は、出てきましたが作業的には簡単だったのではないでしょうか。
学習に使った本はこちら!
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
![](https://teech-lab.com/wp-content/uploads/2021/01/odoroki-cutout.png)
Amazon Kindle Unlimited でもUnityの本はいっぱいあるんじゃ!!
次回は、箱ではないものを表示してみようと思います!!