SteamVR 2.0.1 の Interactions Example をいろいろ触ってみた

[プロ生ちゃん Advent Calendar 2018](https://adventar.org/calendars/3280) に向けて書きました。

大熊 元気と申します。
IoTとVRを組み合わせてデジタルツインとか、何か付加価値を出したいと思いながら日々 遊んでいます。

##VRのインタラクションを作ってみました
1. 召喚する、回転させる、持って振り回す
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">プロ生ちゃん <a href="https://twitter.com/pronama?ref_src=twsrc%5Etfw">@pronama</a> とバーチャルクリスマスパーティーすっぞぉ！<a href="https://twitter.com/hashtag/SteamVR?src=hash&amp;ref_src=twsrc%5Etfw">#SteamVR</a> <a href="https://twitter.com/hashtag/WinMR?src=hash&amp;ref_src=twsrc%5Etfw">#WinMR</a> <a href="https://t.co/VqQfNYfacM">pic.twitter.com/VqQfNYfacM</a></p>&mdash; 大熊 元気＠デジタルツイン (@JNTEST23) <a href="https://twitter.com/JNTEST23/status/1067942517511876609?ref_src=twsrc%5Etfw">2018年11月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

2. サイズを変える
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">あれ？プロ生ちゃん、背のびた？ <a href="https://t.co/1yEXLuuHac">pic.twitter.com/1yEXLuuHac</a></p>&mdash; 大熊 元気＠デジタルツイン (@JNTEST23) <a href="https://twitter.com/JNTEST23/status/1068064242018877440?ref_src=twsrc%5Etfw">2018年11月29日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


##下準備
UnityとSteamVRの基本についてはこちらの資料を参考にどうぞ。
<iframe src="//www.slideshare.net/slideshow/embed_code/key/9flic6GsnlloSt" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/GenkiOkuma/vr-201811" title="VRで日本語音声認識の作り方 201811" target="_blank">VRで日本語音声認識の作り方 201811</a> </strong> from <strong><a href="https://www.slideshare.net/GenkiOkuma" target="_blank">Genki Okuma</a></strong> </div>
◆今回使っているVersion
Unity : 2018.2.14f1
SteamVR : 2.0.1


##やってみたインタラクション
###持つ（グラブ）
SteamVR Plugin のサンプルから、これを参考にする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147524/adb10e0b-5713-11b0-a238-e0d58af27324.png)
Throwable.cs をGameObjectにアタッチすると、下記のスクリプトが強制的にアタッチされ、Throwable一式がセットになっている。
・VelocityEstimator.cs
・Rigidbody
・Interactable.cs
・Throwable.cs  
あとは対象物（プロ生ちゃん）のコライダを調整するだけ。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147524/bd4466f0-bfe7-e3f5-b7cf-ccdd6af15fed.png)

###動かす
SteamVR Plugin のサンプルから、これを参考にする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147524/0e98898c-4522-63d2-e9e1-e633947f4759.png)
・LinearDrive.csにLinear MappingというObjectが仕込まれている。これがHandleと動かす対象物（プロ生ちゃん）をリンクする鍵となっている。
・Handleと対象物（プロ生ちゃん）の親子関係は必要ないので、Linear MappingでリンクしたらHandleはPlayerについてくるようにVR Cameraの下におく。
・対象物（プロ生ちゃん）のアニメーションを設定する。ここでは60フレーム後にY軸だけ720度回転とした。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147524/5ffe361d-a3d4-c7fc-c55f-29664ee5332e.png)
サイズを変えるならScaleを変える。ここでは60フレーム後に150倍とした。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147524/2145061c-ecd9-95f1-2e95-07a5370f3ac8.png)


###召喚する
SteamVR Plugin のサンプルから、これを参考にする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147524/ab6ee52a-16b5-b18e-88ef-1dbb0ed3e0ea.png)
ButtonExample.cs にPrefabを設定できるようになっているのでプロ生ちゃんのモデルに差し替える。クリスマスっぽく赤と緑を出したかったので召喚するPrefabをリスト化する。

~~~cs:C#
        public List<GameObject> prefabs;
        private int InstantiatedPrefabsCount = 0;

        private void Start()
        {
            hoverButton.onButtonDown.AddListener(OnButtonDown);
        }

        private void OnButtonDown(Hand hand)
        {
            StartCoroutine(DoPlant());
        }

        private IEnumerator DoPlant()
        {
            var prefab = prefabs[InstantiatedPrefabsCount];
            InstantiatedPrefabsCount++;
            if (InstantiatedPrefabsCount >= prefabs.Count)
            {
                InstantiatedPrefabsCount = 0;
            }
~~~

召喚したPrefabにはLinear Mappingのリンクがないので、スクリプトでつけてやる。

~~~cs:C#
            var linearAnimator = planting.GetComponent<LinearAnimator>();
            linearAnimator.linearMapping = LinearMapping;
~~~


![image.png](https://qiita-image-store.s3.amazonaws.com/0/147524/0cd0eebc-fa21-3202-faf5-4284d6476379.png)


###初期位置に戻す
SteamVR Plugin のサンプルから、これを参考にする。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/147524/9a40c3b3-3b51-b008-480e-71c7ec6aafa6.png)
LockToPoint.csが使える。サイズ調整するものを持てるようにすると初期位置に戻るがほしくなる。

##まとめ＆考察
・SteamVR Pluginが優秀すぎる。サンプルを参考にするだけでインタラクションをいろいろできる。
・2018年9月にバージョンアップされて、サンプルが充実した。
・自分で好きなように世界を作るの楽しい。

以上です。プロ生ちゃんありがとうございました！