Unityで視線誘導のための矢印をつくる③

#はじめに
[前回](https://qiita.com/E-CAT/items/1afd3cc58a4a314c2483) （Unityで視線誘導のための矢印をつくる②）の続きです。
※HTC VIVEを使って開発しています。

実は前回の誘導矢印は不完全でした。
別の矢印３Dオブジェクトの場合、HMDを動かすと矢印の上側や下側の面が見えてしまします。
画像を用いた場合、画像が見えなくなります。今回はこの問題を解消します。



![20190721_arrow_02.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/4436eb30-30df-5977-c6e0-eed520887f18.jpeg)

![20190721_arrow_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/9e1c340b-38f9-b614-b30e-c405f3804713.gif)

![20190721_arrow_03.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/56f69ceb-3493-82a5-f391-b5d60957a8da.gif)


#完成イメージ
画像を使用しても問題なく表示されます。
![20190721_arrow_11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/18bebf54-9b61-143f-9d70-06d9159ec08d.gif)


#実装
前回の実装では注視対象に矢印を向ける処理に`Transform.LookAt`を使用していましたが回転を上手く制御できていませんでした。

今回は回転をいい感じになるよう実装していきたいと思います。

[こちら](http://tsubakit1.hateblo.jp/entry/2018/02/05/235634)の記事を参考にさせていただきました。
（もうこれでいいじゃん）

記事中、角度を求めるため内積と外積を使用していますが、左右判定の`Vector3.Cross`はどうやらHMDを動かしていると符号が度々入れ替わってしまい期待した結果が得られませんでした。

なので左右判定（今回は実装上Cameraの上半分か下半分か判定）はコライダーを用いて実装します。（※脳筋実装。）
ヒエラルキーは最終的に以下のような状態になります。
![20190721_arrow_09.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/f35d9897-c920-72ec-8793-21815df6c8c5.jpeg)


###【１】下準備
・Cameraの子階層に空のオブジェクトを作成し、名前を「Z_PlusOne」とします。
Camera の前方に矢印を配置したいのでの`Transform`の Z 値を１に設定ます。
今後、この「Z_PlusOne」の子階層にオブジェクトを追加していきます。
![20190721_arrow_04.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/537e1baf-8892-fb2f-adad-64761738c48a.jpeg)

###【２】下準備２
回転のための下準備が続きます。
・「Z_PlusOne」の子階層に空のオブジェクトを作成し、名前を「RotationBase」として前回作成した`MyLookAtTarget2.cs`をアタッチし、注視先オブジェクトを指定します。
これで「RotationBase」は注視先オブジェクトを向くことができます。
![20190721_arrow_05.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/98305efc-f061-11df-b3e4-111e328c3880.jpeg)

・「RotationBase」の子階層にCubeを作成し、名前を「RotationCube」とします。
「RotationCube」は、Cameraの上半分かをコライダーで判定するために使用します。
「RotationCube」に以下を設定します。
![20190721_arrow_06.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/4a0e5e65-42dc-437f-8e67-eb9bbb3c67e4.jpeg)

・「Z_PlusOne」の子階層に空のオブジェクトを作成し、名前を「BaseObject」とします。
「BaseObject」は矢印の回転角度を求めるために使用します。
`Rotation` の Y の値を 90 に設定します。
![20190721_arrow_07.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/ee64a25c-f43e-0f37-29ca-fe89bdf0ee51.jpeg)

###【３】矢印の親オブジェクトを作る
矢印オブジェクトそのものをスクリプトで回転させても良いのですが、今回は矢印オブジェクトの親となるオブジェクトを作成し、その親オブジェクトを回転させようと思います。

・「Z_PlusOne」の子階層に空のオブジェクトを作成し、名前を「ArrowBase」とします。
「ArrowBase」に`MyLookAtTarget3.cs`（今回新規作成）をアタッチします。
`MyLookAtTarget3.cs`は、「baseObject」と「rotationCube」を参照して回転角度を求めます。

```
using UnityEngine;

/// <summary>
/// baseObject、rotationCubeから角度を求めアタッチしたオブジェクトに反映
/// </summary>
public class MyLookAtTarget3 : MonoBehaviour {

    // Cameraから見て、矢印が上にあるか。
    [HideInInspector] public bool arrowPosUp = false;

    [SerializeField] private Transform baseObject;
    [SerializeField] private Transform rotationCube;

    void Update () {

        // 内積を求める
        var diff = (rotationCube.position - baseObject.position).normalized;

        // 回転角を求める
        var angle = Vector3.Angle(baseObject.forward, diff) * (arrowPosUp ? 1 : -1);

        // 現在の角度を取得（クォータニオン）
        Quaternion rotation = this.transform.localRotation;

        // クォータニオン → オイラー角への変換
        Vector3 rotationAngles = rotation.eulerAngles;

        // Z軸回転
        rotationAngles.z = angle;

        // オイラー角 → クォータニオンへの変換
        rotation = Quaternion.Euler(rotationAngles);

        // 角度更新
        this.transform.localRotation = rotation;
    }
}
```



###【４】Cameraから見て矢印が上半分にあるか判定するコライダーを作成する
・「Z_PlusOne」の子階層にCubeを作成し、名前を「CollisionCube」とします。
「CollisionCube」に以下を設定します。
![20190721_arrow_08.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285370/509c4a2e-1548-39e5-2377-c00374380811.jpeg)

また、「RotationCube」と衝突判定するために`CollisionCube.cs`（今回新規作成）を「CollisionCube」にアタッチし、arrowBase に「ArrowBase」を指定します。

```
using UnityEngine;

public class CollisionCube : MonoBehaviour {

    [SerializeField] private GameObject arrowBase;

    // Camera の上半分に矢印がある
    private void OnTriggerEnter(Collider other)
    {
        if(other.gameObject.name == "RotationCube")
        {
            arrowBase.GetComponent<MyLookAtTarget3>().arrowPosUp = true;
        }
    }

    // Camera の下半分に矢印がある
    private void OnTriggerExit(Collider other)
    {
        if(other.gameObject.name == "RotationCube")
        {
            arrowBase.GetComponent<MyLookAtTarget3>().arrowPosUp = false;
        }
    }
}
```

###【５】矢印オブジェクトを作成する
・矢印オブジェクトを「ArrowBase」の子階層に作成します。名前は何でもよいですが、私は「Arrow」としました。
オブジェクトの作りによっては注視対象の方を向かないので、Unityエディタで実行しながら必要に応じRotationの値を調整してください。

#終わりに
脳筋実装が終わりました。
これで矢印オブジェクトが３Dでも２Dでも気にせず視線誘導を行えます。
数学が出来るともっとスマートに実装できることでしょう。勉強しないとなぁ。