概要
Leap Motion + Unity 2017.3 + Mac で、3Dお絵かきアプリを開発してみました。
Leap MotionのUnity向けのパッケージ「LeapMotionCoreAssets」をベースにしています。
leapmotion/LeapMotionCoreAssets
前提条件
Unityの初歩的知識(シーンについてなど)、使い方が理解できていること。
以下のサイトなどで使い方を学習しておくとよいでしょう。
Unity 概要 - Unity マニュアル
環境
以下の環境で開発しました。
- 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
Unityのインストール
以下のサイトを参考に、Unityのインストールを行います。
[Unity2017.3をMacにインストールする]
(https://qiita.com/shiutk/items/69b8ceaea0be09dcebea)
Unityでプロジェクトを新規作成
まず、Unityを起動し、「New Project」をクリックします。
![Start_Unity.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2Fdb41f9ab-d5f9-cff4-b281-15b5128913af.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=423e2fb83c17c9d3ee5b469853df3a52)
次に、Project nameとLocationを設定します。
一例として、Project nameを「3DPainting」、Locationを「/Users/ユーザ名/UnityProjects」に設定します。
![Create_Project.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2Fe515ca1d-d2d0-864c-2c40-4398ff68df67.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=f0e28261637af9f0cc23c402fcbbc6fa)
そして、「Create project」をクリックすると、先ほど作成したプロジェクトが開きます。
![Open_Project.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2F71b64661-0aa7-6c18-5398-0cb3ef6e6424.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a9a74e0f43850261515b8f1f9b14626d)
LeapMotionCoreAssetsのインポート
まず、以下のサイトより、LeapMotionCoreAssetsをダウンロードします。
バージョンは「2.3.0」にします。
(それより上のバージョンだとMacに対応していない模様。。)
Release Leap Motion Core Assets v2.3.0 · leapmotion/LeapMotionCoreAssets · GitHub
次に、「Assets」 -> 「Import Package」 -> 「Custom Package...」を選択し、ダウンロードしたLeapMotionCoreAssetsをインポートします。
インポート時、以下の画面が表示されますが、「LeapMotion+OVR」と、「OVR」のチェックを外した状態で「Import」をクリックします。(ちなみに、「OVR」とはOculusのことのようです。)
![Import_Unity_Package.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2F29d4819a-5b3b-d12f-2560-b8fa7bb80688.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=7880a716f18c1054659b92e3c38ab9e3)
LeapMotionCoreAssetsを使ってみる
一例として、「VoxelHand」を使用してみます。
まず、「Assets/LeapMotion/Scenes」に移動し、「VoxelHand」をダブルクリックします。
![Select_Scenes_VoxelHand.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2F35d6ee22-6690-fee8-a1ce-a1712a3d79dd.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=16c7ec6240274f36f6587c71b3b7ad25)
すると、シーンが読み込まれるので、画面上部の再生ボタンをクリックします。
![Play_VoxelHand.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2Fb10ed388-9f6c-2d35-db97-48ae5498cc66.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=d6fdaa2b4de81998d153628c1bc0bea4)
そして、LeapMotionに手をかざすと、以下のようにボクセル化された手が出現します。
![Playing_VoxelHand.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2Fd1b32f5e-8a19-eb42-1b80-b532d206c774.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=eb75620840e5b064d1857daa99f7865c)
3Dお絵かきができるようにカスタマイズしてみる
まず、Hierarchyから「VoxelHand」を選択し、「Add Component」をクリックします。
![Select_GameObject_VoxelHand.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2Fa877a247-96d5-8239-3d8c-60cd7be081d3.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=422a5e90d5240c808253dcbc030ff4e2)
次に、検索欄に「Trigger」と入力し、「Trigger Drawing」を選択します。
すると、VoxelHandにTrigger DrawingがComponentとして追加されます。
![Add_Component_Trigger_Drawing.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2Fdee67583-b825-55d7-50bd-b795ee14900c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=cc9253e2d37005fbef6ffb7f298101ae)
同様の手順で、「Line Renderer」もComponentとして追加します。
![Add_Component_Line_Renderer.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2F2a1026dd-5294-b8fd-3acd-1e293ccdb476.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=5abae7bbea240ae04306a94d668d1acd)
追加できたら、先ほどと同様に画面上部の再生ボタンをクリックします。
そして、LeapMotionに手をかざして、人差し指を指した状態で動かすと、指でなぞった部分が以下のように黒く描画されます。
![Play_3DPainting.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F93963%2Fcacb7564-9a8d-1bbb-1dc8-6f0b6de2e32d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=3ea88d808d2b58bd38040008f014a783)
作成したソースコード
以下にありますので、ご自由にお使いください。
hiesiea/3DPainting