Leap Motion + Unity 2017.3 + Macで、3Dお絵かきアプリを開発してみた

# 概要
Leap Motion + Unity 2017.3 + Mac で、3Dお絵かきアプリを開発してみました。
Leap MotionのUnity向けのパッケージ「LeapMotionCoreAssets」をベースにしています。
[leapmotion/LeapMotionCoreAssets](https://github.com/leapmotion/LeapMotionCoreAssets)

# 前提条件
Unityの初歩的知識（シーンについてなど）、使い方が理解できていること。
以下のサイトなどで使い方を学習しておくとよいでしょう。
[Unity 概要 - Unity マニュアル](https://docs.unity3d.com/ja/540/Manual/UnityOverview.html)

# 環境
以下の環境で開発しました。

- Leap Motion ソフトウェア バージョン：2.3.1+31549 Firmware Revision: 1.7.0
- Unity Version 2017.3.1f1 Personal
- MacOS High Sierra バージョン 10.13.3

# 開発環境構築
## Leap Motionのセットアップ
以下のサイトより、Leap Motionのセットアップを行います。
[Desktop Setup — Leap Motion](https://www.leapmotion.com/setup/desktop/osx/)

## Unityのインストール
以下のサイトを参考に、Unityのインストールを行います。
[Unity2017.3をMacにインストールする]
(https://qiita.com/shiutk/items/69b8ceaea0be09dcebea)

# Unityでプロジェクトを新規作成
まず、Unityを起動し、「New Project」をクリックします。

<img width="1112" alt="Start_Unity.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/db41f9ab-d5f9-cff4-b281-15b5128913af.png">

次に、Project nameとLocationを設定します。
一例として、Project nameを「3DPainting」、Locationを「/Users/ユーザ名/UnityProjects」に設定します。

<img width="1112" alt="Create_Project.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/e515ca1d-d2d0-864c-2c40-4398ff68df67.png">

そして、「Create project」をクリックすると、先ほど作成したプロジェクトが開きます。

<img width="1392" alt="Open_Project.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/71b64661-0aa7-6c18-5398-0cb3ef6e6424.png">

# LeapMotionCoreAssetsのインポート
まず、以下のサイトより、LeapMotionCoreAssetsをダウンロードします。
バージョンは「2.3.0」にします。
（それより上のバージョンだとMacに対応していない模様。。）
[Release Leap Motion Core Assets v2.3.0 · leapmotion/LeapMotionCoreAssets · GitHub](https://github.com/leapmotion/LeapMotionCoreAssets/releases/tag/v2.3.0)

次に、「Assets」 -> 「Import Package」 -> 「Custom Package...」を選択し、ダウンロードしたLeapMotionCoreAssetsをインポートします。
インポート時、以下の画面が表示されますが、「LeapMotion+OVR」と、「OVR」のチェックを外した状態で「Import」をクリックします。（ちなみに、「OVR」とはOculusのことのようです。）

<img width="384" alt="Import_Unity_Package.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/29d4819a-5b3b-d12f-2560-b8fa7bb80688.png">

# LeapMotionCoreAssetsを使ってみる
一例として、「VoxelHand」を使用してみます。
まず、「Assets/LeapMotion/Scenes」に移動し、「VoxelHand」をダブルクリックします。

<img width="656" alt="Select_Scenes_VoxelHand.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/35d6ee22-6690-fee8-a1ce-a1712a3d79dd.png">

すると、シーンが読み込まれるので、画面上部の再生ボタンをクリックします。

<img width="1392" alt="Play_VoxelHand.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/b10ed388-9f6c-2d35-db97-48ae5498cc66.png">

そして、LeapMotionに手をかざすと、以下のようにボクセル化された手が出現します。

<img width="1314" alt="Playing_VoxelHand.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/d1b32f5e-8a19-eb42-1b80-b532d206c774.png">

# 3Dお絵かきができるようにカスタマイズしてみる
まず、Hierarchyから「VoxelHand」を選択し、「Add Component」をクリックします。

<img width="1392" alt="Select_GameObject_VoxelHand.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/a877a247-96d5-8239-3d8c-60cd7be081d3.png">

次に、検索欄に「Trigger」と入力し、「Trigger Drawing」を選択します。
すると、VoxelHandにTrigger DrawingがComponentとして追加されます。

<img width="264" alt="Add_Component_Trigger_Drawing.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/dee67583-b825-55d7-50bd-b795ee14900c.png">

同様の手順で、「Line Renderer」もComponentとして追加します。

<img width="264" alt="Add_Component_Line_Renderer.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/2a1026dd-5294-b8fd-3acd-1e293ccdb476.png">

追加できたら、先ほどと同様に画面上部の再生ボタンをクリックします。
そして、LeapMotionに手をかざして、人差し指を指した状態で動かすと、指でなぞった部分が以下のように黒く描画されます。

<img width="1314" alt="Play_3DPainting.png" src="https://qiita-image-store.s3.amazonaws.com/0/93963/cacb7564-9a8d-1bbb-1dc8-6f0b6de2e32d.png">

# 作成したソースコード
以下にありますので、ご自由にお使いください。
[hiesiea/3DPainting](https://github.com/hiesiea/3DPainting)

# 参考URL
[MacでLeapMotionをUnityで使う方法](https://qiita.com/takish/items/ab86727784d20e4b1575)
[MacにてUnity上でLeap Motionを動かしてみる](http://blog.livedoor.jp/frog_woman/archives/66432422.html)